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

前端之家收集整理的这篇文章主要介绍了HTML/CSS将DIV对齐到页面底部和屏幕 – 以先到者为准前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个div:
clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;

和一个html,body:

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扫描时

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

我试过固定,但只是修复它..没有用于我

我如何将div放在屏幕底部页面上,这取决于它们是否滚动

解决方法

好的,固定和工作: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>

猜你在找的HTML相关文章