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 对齐到页面底部和屏幕 - 以先到者为准的主要内容,如果未能解决你的问题,请参考以下文章