我正在尝试制作一个带有固定页脚和与页面宽度相同的页眉的网站布局。内容 div 应为 960px 宽，高度应从页眉底部到页脚顶部。它应该始终至少是这个高度。我现在面临的问题是，我可以让内容 div 达到其内容的高度，或者扩展到页面应该结束的下方的 wrap div。
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
html{
height: 100%;
min-height: 100%;
}
body{
min-height: 100%;
width: 100%;
height:100%;
}
#wrap{
height:auto;
height:100%;
min-height:100%;
position:relative;
margin:auto;
}
#header{
background: blue;
height: 152px;
}
#content{
background: #555;
min-height: 100%;
margin: 0 auto;
width: 960px;
}
#footer{
margin-bottom: 41px;
height: 59px;
background: red;
position:absolute;
width:100%;
bottom:0;
}
</style>
</head>
<body>
<div id ='wrap'>
<div id='header'>
</div>
<div id='content'>
</div>
<div id='footer'>
</div>
</div>
</body>
最佳答案
您应该对#wrap 下的所有元素使用position:relative，这样它们将相对定位在彼此之下，将高度设置为 100% 没有帮助。
您已将页脚位置设置为绝对位置，这将使它固定在页面顶部
关于css - 粘性页脚布局有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6971271/