CSS 如何在浏览器的右下角定位一个div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3616572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position a div in bottom right corner of a browser?
提问by KoolKabin
I am trying to place my div with some notes in the bottom rightposition of the screen which will be displayed all time.
我正在尝试将带有一些注释的 div放在屏幕的右下角位置，这些位置将始终显示。
I used following css for it:
我使用了以下css：
#foo
{
position: fixed;
bottom: 0;
right: 0;
}
It works fine with Chrome 3 and Firefox 3.6 but IE8 sucks...
它适用于 Chrome 3 和 Firefox 3.6，但 IE8 很烂......
what can be a suitable solution for it?
什么是合适的解决方案？
回答by sewa
This snippet works in IE7 at least
此代码段至少适用于 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>
回答by Morgoth
I don't have IE8 to test this out, but I'm pretty sure it should work:
我没有 IE8 来测试这个，但我很确定它应该可以工作：
<div class="screen">
<!-- code -->
<div class="innerdiv">
text or other content
</div>
</div>
and the css:
和CSS：
.screen{
position: relative;
}
.innerdiv {
position: absolute;
bottom: 0;
right: 0;
}
This should place the .innerdiv in the bottom-right corner of the .screen class. I hope this helps :)
这应该将 .innerdiv 放在 .screen 类的右下角。我希望这有帮助 ：）
回答by Cipi
Try this:
尝试这个：
#foo
{
position: absolute;
top: 100%;
right: 0%;
}
