如何在浏览器的右下角放置div？

77

我试图将带有一些注释的div放置在屏幕的右下角，该注释将一直显示。

我使用以下CSS：

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

它在Chrome 3和Firefox 3.6上都可以正常工作，但IE8很烂...

有什么合适的解决方案？

css cross-browser

— 库尔·卡宾
source

您正在使用什么DOCTYPE？对IE的“兼容”模式的思考

— sewa 2010年

无...应该使用哪个？

— KoolKabin 2010年

关于您下面的IE6评论，IE6无法理解position:fixed;。因此，您要做的是创建一个包装div，position:relative;该div充满整个屏幕，然后将所需的div放置在其中position:absolute;。但是，如果您的网站向下滚动，则需要在IE6中使用CSS表达式，以使div停靠在右下角。

— Strelok 2010年

thnx的信息。关于IE 6，我最好

— 别管它

123

此代码段至少在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>

— 塞瓦
source

除非我删除“ <!DOCTYPE html>”，为什么这对我不起作用？

— ashleedawg

14

我没有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类的右下角。我希望这有帮助：）

— 莫高斯
source

9

尝试这个：

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

— 奇皮
source

5

我认为这会使上边缘低于父元素的底部边缘。

— Michael Robinson'9

100％是screen.height-element.height。

— Cipi 2010年