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

Posted

技术标签:

【中文标题】HTML/CSS 将 DIV 对齐到页面底部和屏幕 - 以先到者为准【英文标题】:HTML/CSS Align DIV to bottom of page and screen - whichever comes first 【发布时间】:2011-09-20 19:49:12 【问题描述】:

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

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

我试过修复,但只是修复它..对我没用

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

【问题讨论】:

听起来传统的粘性页脚与提问者想要的完全相反。 【参考方案1】:

好的,已修复并且可以正常工作 :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>

【讨论】:

内容的隐藏部分呢?有没有办法防止这种情况发生?【参考方案2】:

更短的解决方案:

.footer 
    bottom: 0%;
    position: fixed;

【讨论】:

以上是关于HTML/CSS 将 DIV 对齐到页面底部和屏幕 - 以先到者为准的主要内容,如果未能解决你的问题,请参考以下文章

CSS 居中对齐div水平和页面底部

水平居中对齐div和页面底部

底部对齐折叠div在另一个div内

将单个 div 对齐到具有可变高度的行中 div 的底部

Android:如何将相对布局中的所有项目对齐到屏幕底部

html css怎么让文字在页面底部居中