html - 调整浏览器窗口大小后正确显示 CSS 模板的页眉和页脚

Question

我正在使用以下 CSS 显示带有页眉、页脚、左侧边栏和右侧边栏的基本 Web 模板。 http://jsfiddle.net/k5g0frvt/

html, body {
    height: 100%;
    min-width: 800px;
    margin: 0;
}
#container {
    /*display: inline-block;*/
    min-height: 100%;
    margin: 0 auto -90px;
}
#north {
    height: 170px;
    background: pink;
}
#west {
    float: left;
    width: 120px;
    background: #fff;
}
#content {
    margin-left: 120px;
    margin-right: 120px;
    background: lemonchiffon;
    padding: 1px 1em;
}
#east {
    float: right;
    width: 120px;
    background: palegreen;
}
#south, #container:after {
    height: 90px;
}
#south {
    background: #777;
    border-top: 7px solid #000;
}
.clearfix:after {
    display: block;
    content: " ";
    clear: both;
}

这适用于粘性页脚，但例如，当我在内容栏内的表格中显示一些图像时，如下所示，

<div id="container" class="clearfix">
    <div id="north"></div>
    <div id="west"></div>
    <div id="east"></div>

    <div id="content">
        <table>
            <tr>
                <td><img alt="Not available" height="310" width="210"/></td>
                <td><img alt="Not available" height="310" width="210"/></td>
                <td><img alt="Not available" height="310" width="210"/></td>
                <td><img alt="Not available" height="310" width="210"/></td>
            </tr>
        </table>
    </div>
</div>

<div id="south"></div>

显示此表后，如果调整浏览器窗口的大小，则页眉和页脚无法正确显示，如下图所示。

调整浏览器窗口大小时，页眉和页脚会比实际页面内容小。这不应该发生。

如何修复它们？

Answer 1

这里是css

html, body {
    height: 100%;
    margin: 0;
}
#container {
    width: 100%;
    min-height: 100%;
}
.box{
    width: 100%;
    min-width:860px;
    text-align:center;
}
#north {
    height: 150px;
    background: pink;
}
#west{
    width: 120px;
    height: 160px;
    background: cyan;
    float:left;
}
#east{
    width: 120px;
    height: 170px;
    background: palegreen;
    float:right ;
}
#content {
    width: 800px;
    margin:auto;
    background: lemonchiffon;
}
#south{
    height: 300px;
    background: gray;
    border-top: 7px solid #000;
}

这里是html

<div id="container">
    <div id="north" class="box">Content</div>
    <div id="west" ></div>
    <div id="east" ></div>
    <div id="content" class="box">
        <table>
            <tr>
                <td><img alt="Not available" height="310" width="210"/></td>
                <td><img alt="Not available" height="310" width="210"/></td>
                <td><img alt="Not available" height="310" width="210"/></td>
                <td><img alt="Not available" height="310" width="210"/></td>
            </tr>
        </table>
    </div>
    <div id="south" class="box"></div>
</div>