我有以下 HTML 来构建一个 900 像素宽的居中页面，其中包含页眉、页脚和内容部分:
<body>
<div id="mainMaster">
<div id="main">
<form runat="server">
<div id="header">
</div>
<div id="content">
</div>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
布局使用以下(大约)CSS 设置样式:
html, body
{
height: 100%;
}
#mainMaster
{
min-height: 100%;
background: url(../Images/Background.png);
}
#main
{
width: 930px;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header
{
}
#footer
{
background-image:none;
background-color:White;
position: relative;
margin-top: -80px; /* negative value of footer height */
margin-left: auto;
margin-right: auto;
width: 930px;
height: 80px;
clear: both;
}
#content
{
position:relative;
overflow:hidden;
height:100%;
background-image:none;
background-color:White;
}
CSS 最初基于我在互联网上找到的“粘性页脚”布局。它与粘性页脚配合得很好，但后来我遇到了这些问题:
1) “内容”永远不会拉伸(stretch)到全尺寸。这是我的一些页面上的一个大问题，因为内部控件的高度设置为 100%。由于内容未拉伸(stretch)，因此控件显示全部被挤压。
2) 我刚刚添加了背景图像和颜色。此背景不应显示在中间的内容 Pane 中。因为“内容”没有完全拉伸(stretch)，所以背景图片显示在错误的位置。
我更喜欢仅针对此的 CSS 修复(即没有 hack 或 JS)。有帮助吗？
最佳答案
我希望删除#mainMaster <div>并将其背景图片移动到#main 的 CSS 中可以解决您的问题:
<body>
<div id="main">
<form runat="server">
<div id="header"></div>
<div id="content"></div>
</form>
</div>
<div id="footer"></div>
</body>
您遇到的问题是#main 的父级 (#mainMaster) 没有明确声明高度。百分比高度仅在父元素定义了高度时才能正常工作。
关于html - 全高 CSS 列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3300814/