100%高度-dynamic底部高度页脚
我有以下网页。
<body>
<div id="everything">
<div id="top_header">TOP BAR WITH INFO. FIXED HEIGHT</div>
<div id="content">
<div id="header"><h1> MENU</h1></div>
<div id="body">CONTENT</div>
</div><!--end content-->
<div id="footer">DYNAMIC HEIGHT DEPENDING ON THE LINKS IN THE FOOTER</div>
</div><!--end everything-->
</body>和样式：
<style type="text/css">
body {
background-color: #FFFFFF;
font: 13px arial;
margin: 0;
padding: 0;
width: 100%;
}
#everything {
background-color: #FFFFFF;
min-height: 100%;
margin: auto;
width: 100%;
}
#content {
display: block;
margin: auto;
width: 1000px;
}
#header {
padding-bottom: 25px;
background-color:#666699;
height:60px;
}
#body {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
padding-bottom: 23px;
background-color:#CC3333;
height:1500px;
}
#footer {
display: inline-block;
position: absolute;
bottom:0px;
width: 100%;
background-color:#FF6600;
height:70px;
}
#top_header {
width:100%;
background-color:#0066CC;
height:30px;
}
h1{
margin:0;
}
</style>我的页脚的高度是动态的，我不能改变HTML结构，只能改变CSS。当我在较小的屏幕上看到网页，并且"body“的高度大于视区时，没有问题，但如果我在较大的屏幕上查看网页，并且"body”的尺寸小于视区的大小，则页脚不会粘在底部。此外，如果"body“的大小很大(如本例所示)，它不会推入底部的页脚。你能帮助我让页脚总是粘在视口的底部，而不知道页脚的高度和我所有内容所在的"body“的高度吗？
谢谢你，米海
回答 3
Stack Overflow用户
发布于 2012-04-04 16:25:27
您可以定义页脚相对位置和移除绝对位置
#footer{
position:relative;
}Stack Overflow用户
发布于 2012-04-04 16:35:02
这在CSS2中不是完全可能的，特别是灵活的高度页脚通过扩展内容被正确地下推。你可以让它以可变的高度固定在屏幕的底部，但是因为你事先不知道具体的高度，所以你不能相应地设置内容边距/填充底部。
我建议你在页面加载后通过JavaScript来测量页脚高度，并将其作为内容填充/页边距底部应用，这样就可以解决你面临的唯一真正的问题。
另一种选择是通过使用包装器和display: table-row/table-cell来利用表。我在这里回答了一个类似的问题：https://stackoverflow.com/a/9946474/759144
Stack Overflow用户
发布于 2019-02-12 14:00:30
请检查下面的演示。我认为这个解决方案可以帮助您解决您的问题。
body {
background-color: #FFFFFF;
font: 13px arial;
margin: 0;
padding: 0;
width: 100%;
}
#everything {
background-color: #FFFFFF;
min-height: 100%;
margin: auto;
width: 100%;
}
#content {
display: block;
margin: auto;
width: 1000px;
}
#header {
padding-bottom: 25px;
background-color:#666699;
height:60px;
}
#body {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
padding-bottom: 23px;
background-color:#CC3333;
height:1500px;
}
#footer {
display: inline-block;
position: sticky;
bottom:0px;
width: 100%;
background-color:#FF6600;
/* height:70px; */
bottom: 0;
}
#top_header {
width:100%;
background-color:#0066CC;
height:30px;
}
h1{
margin:0;
}<html>
<body>
<div id="everything">
<div id="top_header">TOP BAR WITH INFO. FIXED HEIGHT</div>
<div id="content">
<div id="header"><h1> MENU</h1></div>
<div id="body">CONTENT</div>
</div><!--end content-->
<div id="footer">DYNAMIC HEIGHT DEPENDING ON THE LINKS IN THE FOOTER</div>
</div><!--end everything-->
</body>
</html>
https://stackoverflow.com/questions/10007328
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号