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 或像素的最小高度。这将确保高度填充父级，并在内容太长时扩展。这最适合 www.baka.ca 上的客户评论

Answer 2

我认为这篇文章可以帮助您。

根据这篇文章：

将“position:relative”分配给您的“容器”div - 页面、页面容器或包装器（我不确定三者中的哪一个，只需尝试），然后“position:absolute;”底部：0；”到你的“页脚容器”div。

我希望这对你有帮助。

Answer 3

@denappel；给出 html & body 100% height 将 footer 放在 main div 包装 之外根据页脚的高度，在 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