Question

起初我想为我的代码直接提出问题而道歉，但我认为没有必要提出一点，因为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的{{1}}未将其高度设为min-height: 100%高度。结果是，当浏览器高度（大大）超过内容的高度时，body的底部位于.footer-pageblock的底部而不是浏览器的底部。

Firebug表示.content-pageblock的身高至少有100％。

我无法使其适用于Firefox和IE最多9个）。但是，该代码似乎适用于最新的Chrome和IE 10。

更重要的是，我真的希望保留这个html（将body保留在.footer-pageblock内）

修改

根据this question及其答案，我只需要将.top指定为height: 100%。与我的预期相反，这不会使body的高度达到浏览器的高度。解决。

div的最大高度是100％最小身高的孩子

0 个答案: