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

【问题标题】：HTML/CSS Align DIV to bottom of page and screen - whichever comes firstHTML/CSS 将 DIV 对齐到页面底部和屏幕 - 以先到者为准
【发布时间】：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 位于屏幕和页面的底部，具体取决于是否有滚动

【问题讨论】：

听起来传统的粘性页脚与提问者想要的完全相反。

标签： html css dom position

【解决方案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;
}

【讨论】：