HTML/CSS 将 DIV 与页面和屏幕底部对齐 - 以先到者为准
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6447793/
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
HTML/CSS Align DIV to bottom of page and screen - whichever comes first
提问by Ozzy
I have a div:
我有一个 div：
clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;
And a html, body:
还有一个 html，正文：
html, body {
height:100%;
width:100%;
}
/* Body styles */
body {
background:url(../images/background.png) top center no-repeat #101010;
color:#ffffff;
}
My code is basically 20 loren ipsum paragraphs followed by the div.
我的代码基本上是 20 个 loren ipsum 段落，后跟 div。
Now i tried setting position to relative and absolute and etc but with absolute the div aligns itself to the bottom of the screen so when you scroll down the div scrols with it
现在我尝试将位置设置为相对和绝对等，但绝对的 div 将自身与屏幕底部对齐，因此当您向下滚动 div 时，它会滚动
I tried setting it to relative but when theres not enough content to make the page scroll, the div is not at the bottom of the page.
我尝试将其设置为相对，但是当没有足够的内容使页面滚动时，div 不在页面底部。
I tried fixed but that just fixed it.. no use to me
我试过修复，但只是修复了它..对我没用
How can i get the div to be at the bottom of the screen and page depending on if theres scroll or not
我怎样才能让 div 位于屏幕和页面的底部，具体取决于是否有滚动
回答by Craig White
Ok, fixed and working :D Hope it does what you want it to. Preview here: http://jsfiddle.net/URbCZ/2/
好的，修复并正常工作 :D 希望它能做你想做的事。在这里预览：http: //jsfiddle.net/URbCZ/2/
<html>
<body style="padding:0;">
<div style="position:fixed; width:100%; height:70px; background-color:yellow; padding:5px; bottom:0px; ">
test content :D
</div>
<!--Content Here-->
</div>
</body>
</html>
回答by natedavisolds
You need a javascript solution: part fixed and part inline or absolute with the js to decide. Is jQuery an option here? Here's a screencast: http://jqueryfordesigners.com/fixed-floating-elements/
您需要一个 javascript 解决方案：部分固定，部分内联或绝对与 js 来决定。jQuery 是一个选项吗？这是一个截屏视频：http: //jqueryfordesigners.com/fixed-floating-elements/
