CSS 高度 100% 问题

Question

我知道有很多关于 CSS 100% 高度问题的问题。 但是我尝试按照那里的说明进行操作，但高度仍然不是 100%， 所以我想我会再问一次。

可以看到问题的网站是：

www.exendo.be

一些css样式：

html {
    height: auto !important;
    margin: 0;
    min-height: 100%;
    padding: 0;
}

body {
    background: url("/wp-content/uploads/2011/06/bg.png") repeat-x scroll 0 100px #F2F7E8;
    height: auto !important;
    margin: 0;
    min-height: 100%;
    padding: 0;
    width: 100%;
}

wrapper {
    height: auto !important;
    min-height: 100%;
    position: relative;
}
footer-container {
    background: url("/wp-content/uploads/2011/06/exendo-footer_bg.png") no-repeat scroll center bottom #557F40;
    height:146px;
}

正如您在网站上看到的那样，页脚在页面上太高了。 如果我用 Firebug 检查页面，我可以看到 html 的高度是 100%，但 body 标签不是。 该问题同时出现在 Firefox 和 IE 上。

如果有人可以提供帮助，那就太好了！

Answer 1

多人建议的职位：绝对；底部：0;

如果内容高于容器，这可能会导致问题。高度不会增加，因此内容将不再适合，并且可能会被截断或导致难看的滚动条。

如果你可以给容器一个固定的高度，这是理想的，因为 height:100% 将在子元素上起作用。如果内容太大，您可以在子级上放置一个背景，在父级上设置溢出：可见，这样内容仍然会显示。这会有所帮助，但除非子项与父项的宽度相同，否则它仍然会中断。

如果这不起作用，我建议使用以 em 或像素为单位的 min-height。这将确保高度填充父级，并在内容太长时扩展。这对www.baka.ca 上的客户 cmets 最有效

Answer 2

我认为这个 article 可以帮助你。

根据这篇文章：

将“位置：相对”分配给您的“容器”div - 页面、页面容器或包装器（我不确定这三个中的哪一个，只是尝试），然后是“位置：绝对；底部： 0;"到您的“页脚容器” div。

希望对你有帮助。

Answer 3

@denappel;给html & body 100% height 将footer 放在main div wrapper 之外，并根据页脚的高度在minus 中给出margin-bottom。

css：

.wrapper {
    position: relative;
    width: 700px;
    font-size: 0.9em;
    margin: 0 auto -142px;
    background:yellow;
}
.header {
    height: 190px;
    background:green;
}

.footer {
    position: relative;
    width: 700px;
    margin: 0 auto;
    background:red;
}

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
.footer, .push {
    height: 142px;
}

查看此示例 http://jsfiddle.net/sandeep/tCdPX/3/

这在功能上称为stickyfooter