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

发布时间：2020-12-14 21:27:51 所属栏目：资源来源：网络整理

导读：我有一个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-repea

我有一个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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!