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;

如果内容高于容器,这可能会导致问题.高度不会增加,因此内容将不再适合,可能会被切断或导致丑陋的滚动条.

如果你可以给容器一个固定的高度,这是理想的,因为高度:100%将适用于子元素.如果内容太大,您可以在具有溢出的子项上放置背景:在父项上可见,因此内容仍会显示.这有帮助,但它仍然可以破坏,除非孩子与父母的宽度相同.

如果这不起作用,我建议在em或像素中使用min-height.这将确保高度填充父级,并在内容太长时展开.这最适合客户对www.baka.ca的评论

Answer 2

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

根据这篇文章：

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

我希望这对你有帮助。