CSS高度100％问题

我知道有很多关于css 100％高度问题的问题。但是我试图按照指示那里，仍然高度不是100％，所以我想我会再次问这个问题。CSS高度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上。

如果有人能帮上忙，那太棒了！

来源

2011-06-30 denappel

我觉得这个article可以帮到你。

根据这篇文章：

分配“的立场：相对”你的“容器” DIV - 页面，页面容器或包装类（我不知道到这三个中的一个，只是尝试），然后“位置：绝对;底部：0;”到你的“页脚容器”分区。

我希望能帮到你。

来源

2011-06-30 11:57:45

@denappel;给html & body 100% height把footer外main div wrapper &根据页脚的高度给minus边缘底部。

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

来源

2011-06-30 12:20:22 sandeep

感谢您的提示。我已经尝试了这一点（你可以在exendo.be上查看它），但由于某种奇怪的原因，它并没有工作。我已经删除了保证金：0 auto -142px;因为其他的页脚甚至更高。全高还没有使用，我不知道为什么...... – denappel

一些人建议的位置是：绝对的;底部：0;

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

如果您可以给容器一个固定的高度，这是理想的，因为高度：100％将对子元素起作用。如果内容太大，您可以将背景放置在父级上可见的子级上，因此内容仍会显示。这有所帮助，但是如果孩子的宽度与父母的宽度相同，它仍然可以中断。

如果这不起作用，我建议在em或像素中使用最小高度。这将确保高度填充父项，并在内容太长时扩展。这对最好的客户评论www.baka.ca

来源

2013-03-28 16:15:10

CSS高度100％问题

回答

相关问题