如何将一个div定位在浏览器的右下角？

Question

如何将一个div定位在浏览器的右下角？

96

我试图将带有一些注释的div放置在屏幕的右下角位置，并且始终显示。

我使用了以下CSS：

#foo
{
     position: fixed;
     bottom: 0;
     right: 0;
}

它在Chrome 3和Firefox 3.6上运行良好，但是IE8很糟糕...

有什么适当的解决方法吗？

- KoolKabin

你使用的是哪个DOCTYPE？考虑到IE的“兼容性”模式。 - sewa

应该使用哪个？ - KoolKabin

关于您在下面提到的IE6评论，IE6不理解position:fixed;。因此，您需要有一个包装器div，它具有填充整个屏幕的position:relative;，然后使用position:absolute;定位所需的div。但是，如果您的网站向下滚动，则需要在IE6中使用CSS表达式将div固定在右下角。 - Strelok

谢谢提供信息。对于IE 6主题，我最好别碰它......:P 我在哪里可以找到那个CSS表达式？ - KoolKabin

3个回答

19

我没有IE8来测试，但我相当确定它应该可以工作：

<div class="screen">
   <!-- code -->
   <div class="innerdiv">
      text or other content
   </div>
</div>

和 css：

.screen{
position: relative;
}
.innerdiv {
position: absolute;
bottom: 0;
right: 0;
}

这应该会将 .innerdiv 放在 .screen 类的右下角。

希望这可以帮到你 :)

- Morgoth

11

试试这个：

#foo
{
    position: absolute;
    top: 100%;
    right: 0%;
}

- Cipi

5

我认为这将使得子元素的顶部边缘在父元素底部边缘下方。 - Michael Robinson

不是100％，而是屏幕高度减去元素高度。 - Cipi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sewa · Accepted Answer

这段代码至少可以在IE7上运行

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test</title>
<style>
  #foo {
    position: fixed;
    bottom: 0;
    right: 0;
  }
</style>
</head>
<body>
  <div id="foo">Hello World</div>
</body>
</html>