全高 CSS 列答案

【问题标题】：Full height CSS column全高 CSS 列
【发布时间】：2011-03-19 01:35:59
【问题描述】：

我有以下 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) '内容' 永远不会被拉伸到全尺寸。这在我的某些页面上是一个大问题，因为内部控件设置为 100% 的高度。由于内容没有被拉伸，因此控件全部显示为挤压状态。

2) 我刚刚添加了背景图片和颜色。此背景不应显示在中间内容窗格中。因为“内容”没有完全拉伸，所以背景图像显示在错误的位置。

我更喜欢仅使用 CSS 来解决此问题（即没有 hack 或 JS）。有什么帮助吗？

【问题讨论】：

标签： html css

【解决方案1】：

我希望删除 #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) 没有明确声明高度。只有在父元素定义了高度时，百分比高度才能正常工作。

【讨论】：

我认为需要 mainMaster 才能将粘性页脚保持在屏幕底部。
所有删除#mainMaster 所做的都是导致#main 接管这个角色。如果您注意到，它也具有与 #mainMaster 相同的最小高度声明。

【解决方案2】：

尝试使用min-height CSS 属性为您的内容设置最小高度。

【讨论】：

【解决方案3】：

为#content 和#header 添加特定的背景颜色应该可以防止背景图像显示在这些区域中。不确定为什么内容没有填满该区域，当您说“拉伸”时，您的意思是 100% 的高度吗？如果不使用 js，浏览器将无法识别 100% 的高度。

【讨论】：