Css 粘性页脚布局有问题_Css

Css 粘性页脚布局有问题

css

Css 粘性页脚布局有问题,css,Css,我正在尝试制作一个带有粘性页脚和页眉的站点布局，页眉与页面宽度一致。内容div的宽度应为960px，高度应从页眉底部到页脚顶部。它应该始终至少是这个高度。我现在面临的问题是，我可以将content div设置为其内容的高度，或者将其扩展到wrap div之后，即页面应该结束的地方 <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "htt

我正在尝试制作一个带有粘性页脚和页眉的站点布局，页眉与页面宽度一致。内容div的宽度应为960px，高度应从页眉底部到页脚顶部。它应该始终至少是这个高度。我现在面临的问题是，我可以将content 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>


html{
身高：100%；
最小高度：100%；
}
身体{
最小高度：100%；
宽度：100%；
身高：100%；
}
#包裹{
高度：自动；
身高：100%；
最小高度：100%；
位置：相对位置；
保证金：自动；
}
#标题{
背景：蓝色；
高度：152px；
}
#内容{
背景:#555；
最小高度：100%；
保证金：0自动；
宽度：960px；
}
#页脚{
边缘底部：41px；
高度：59px；
背景：红色；
位置：绝对位置；
宽度：100%；
底部：0；
}

您应该对#wrap下的所有元素使用

位置：relative

，这样它们将相对地位于彼此下方，而将高度设置为100%则没有帮助

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

您应该对#wrap下的所有元素使用

position:relative

，因此它们将相对放置在彼此下方，而将height设置为100%没有帮助

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

我不明白您的意思，您可能想更清楚地解释它，或者只是我不理解它。上面的代码是这样的：它应该是这样的：我不明白您的意思，你可能想解释得更清楚些，或者只是我不明白。上面的代码是这样的：应该是这样的：页脚设置为绝对值。无论哪种方式，这都不会使我的content div跨越页脚和页眉之间的垂直空间页脚设置为绝对值。无论如何，这都不会使我的content div跨越页脚和页眉之间的垂直空间