0

起初，我想为将我的代码直接放入问题中而道歉，但我认为没有任何意义，因为 jsfiddle 似乎根本不支持我的想法。

我有一个文件的脚手架，比如

<body>
    <div id = "top" class = "top">
        <div class = "container-pageblock">
            <div class = "block-content">
                <div class = "some-element">rolololo</div>
            </div>
        </div>
        <div class = "footer-pageblock">
            <div class = "block-content">foter</div>
        </div>
    </div>
</body>

使用 css 规则

html
{
    height: 100%;
}
body
{
    font-family: "Segoe UI";
    padding: 0;
    margin: 0;
    min-height: 100%
}
.top
{
    width: 100%;
    min-height: 100%;
    background-color: #eee;
    position: relative;
}
[class $= "-pageblock"]
{
    width: 100%;
}
[class $= "-pageblock"] .block-content
{
    width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
.top, [class $= "-pageblock"]
{
    min-width: 1080px;
}

.container-pageblock
{
    background-color: #afa;
}
.footer-pageblock
{
    text-align: center;
    display: block;
    background: #dde;
    position: absolute;
    bottom: 0;
}

.some-element
{
    height: 500px;
}

我的目标是让页脚粘在浏览器的底部（在内容太少时.container-pageblock和之间有一些空白），并且随着内容的增长，页脚位于文档的底部。这基本上意味着我需要页脚最多（不高于）位于浏览器窗口的底部。.footer-pageblock

问题似乎是div.top'smin-height: 100%没有将其高度作为body高度。效果是，当浏览器高度（远）大于内容的高度时，.footer-pageblock底部.content-pageblock位于浏览器底部而不是底部。

Firebug 表明body' 的高度确实至少有 100%。

我无法让它适用于 Firefox 和 IE 高达 9)。然而，代码似乎在最新的 Chrome 和 IE 10 中工作。

更重要的是，我真的很想保留这个html（也就是保留.footer-pageblock里面.top）

编辑

根据这个问题及其答案，我只需要指定height: 100%to body。与我的预期相反，这不会使.top' 高度等于浏览器的高度。解决了。

4

0 回答 0