HTML / CSS将DIV对齐到页面底部和屏幕 - 以先到者为准

时间:2011-06-22 23:38:01

标签: html css dom position

我有一个div:

clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;

还有一个html,正文:

html, body {
    height:100%;
    width:100%;
}


/* Body styles */
body {
    background:url(../images/background.png) top center no-repeat #101010;
    color:#ffffff;
}

我的代码基本上是20个loren ipsum段落,后跟div。

现在我尝试将位置设置为相对和绝对等等,但是绝对地,div将自己对齐到屏幕的底部,所以当你向下滚动div scrols时

我尝试将其设置为相对但是当内容不足以使页面滚动时,div不在页面的底部。

我尝试修复但是修复了它..对我没用“

我如何让div位于屏幕和页面的底部,具体取决于是否滚动

2 个答案:

答案 0 :(得分:46)

好的,修复和工作: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>

答案 1 :(得分:0)

你需要一个javascript解决方案:部分修复,部分内联或绝对与js来决定。这是jQuery的选择吗?这是一个截屏视频:http://jqueryfordesigners.com/fixed-floating-elements/