如何在浏览器的右下角放置一个div？答案

【问题标题】：How to position a div in bottom right corner of a browser?如何在浏览器的右下角放置一个div？
【发布时间】：2011-04-06 16:55:25
【问题描述】：

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

我使用了以下 css：

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

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

什么是合适的解决方案？

【问题讨论】：

您使用的是什么 DOCTYPE？ IE“兼容”模式的思考
none...应该使用哪个？
关于你下面的IE6评论，IE6不理解position:fixed;。所以你要做的是有一个包装 div，它有一个 position:relative; 填充整个屏幕，然后你用 position:absolute; 定位你想要的 div。但是，如果您的网站向下滚动，您需要在 IE6 中使用 CSS 表达式来保持 div 停靠在右下角。
谢谢信息。关于 IE 6 他们我最好不要管它......：P 我在哪里可以找到那个 css 表达式

标签： css cross-browser

【解决方案1】：

我没有 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 类的右下角。我希望这会有所帮助:)

【讨论】：

【解决方案2】：

这个 sn-p 至少在 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>

【讨论】：

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

【解决方案3】：

试试这个：

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

【讨论】：

我认为这会使上边缘低于父元素的下边缘。
没有。 100% 是 screen.height - element.height。