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

我认为 article 可以为您提供帮助。

根据这篇文章：

将“position：relative”分配给你的“容器”div - page，page-container或wrapper（我不确定三者中的哪一个，只是尝试），然后“position：absolute; bottom： 0;”到你的“页脚容器”div。

我希望能帮助你。

Answer 3

@denappel;将html & body 100% height放在footer＆amp; 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

CSS高度100％问题

3 个答案: