粘性页脚布局有问题答案

【问题标题】：Having trouble with sticky footer layout粘性页脚布局有问题
【发布时间】：2011-10-21 17:24:50
【问题描述】：

我正在尝试制作一个带有粘性页脚和页眉宽度的网站布局。内容 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>

【问题讨论】：

我不明白你的意思，你可能想解释清楚一点，或者只是我不明白。
上面的代码是这样的：link 它应该是这样的：link

标签： css

【解决方案1】：

您应该为#wrap 下的所有元素使用position:relative，这样它们将相对位于彼此下方，并且将高度设置为 100% 没有帮助。

您已将页脚位置设置为绝对位置，这将使其停留在页面顶部

【讨论】：

页脚设置为绝对。无论哪种方式，这都不会让我的内容 div 跨越页脚和页眉之间的垂直空间