Question

我有以下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％的高度。由于内容未被拉伸，控件会显示所有squeeshed。

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

我更喜欢只修复CSS（即没有hacks或JS）。有什么帮助吗？

Answer 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）没有声明显式高度。只有在父元素具有高度定义的情况下，百分比高度才能正常工作。

Answer 2

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

Answer 3

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

全高CSS列

3 个答案: