CSS 高度 100% 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6534156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS height 100% issue
提问by denappel
I know there are a lot of questions about a css 100% height problem. However I've tried to follow the instructions there and still the height isn't 100%, so I thought I'd ask the question again.
我知道有很多关于 css 100% 高度问题的问题。但是我已经尝试按照那里的说明操作，但高度仍然不是 100%，所以我想我会再问这个问题。
The site where you can see the problem is:
您可以看到问题的站点是：
some css styles:
一些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;
}
As you can see on the site, the footer is too high on the page. If I inspect the page with Firebug, I can see that the html is 100% height, but the body tag isn't. The problem both occurs on Firefox and IE.
正如您在网站上看到的，页脚在页面上太高了。如果我用 Firebug 检查页面，我可以看到 html 是 100% 高度，但 body 标记不是。这个问题在 Firefox 和 IE 上都会发生。
If anybody could help that would be great!
如果有人可以提供帮助，那就太好了！
回答by Frank Forte
A number of people suggested position:absolute; bottom:0;
多人建议位置：绝对；底部：0;
This can cause an issue if the content is taller than the container. The height will not increase so the content will no longer fit and can get cut off or result in ugly scroll bars.
如果内容高于容器，这可能会导致问题。高度不会增加，因此内容将不再适合并可能被切断或导致丑陋的滚动条。
If you can give a fixed height to the container, this is ideal since the height:100% will then work on the child element. In case the content is too large, you can put a background on the child with overflow:visible on the parent, so the content still displays. This helps, but it can still break unless the child is the same width as the parent.
如果您可以为容器提供固定高度，这是理想的，因为 height:100% 将适用于子元素。如果内容太大，您可以在子级上放置一个溢出的背景：在父级上可见，因此内容仍然显示。这有帮助，但它仍然可能会中断，除非孩子与父母的宽度相同。
If that doesn't work, I recommend using min-height in em or pixels. This will make sure the height fills the parent, and expands if the content is too long. This worked best for customer comments on www.baka.ca
如果这不起作用，我建议使用以 em 或像素为单位的 min-height。这将确保高度填充父级，并在内容太长时扩展。这对www.baka.ca 上的客户评论最有效
回答by a.m
I think this articlecan help you.
我想这篇文章可以帮到你。
According to this article:
根据这篇文章：
Assign "position:relative" to your "container" div - page, page-container, or wrapper (I'm not sure to which one of the three, just try), and then "position:absolute; bottom:0;" to your "footer-container" div.
将“位置：相对”分配给您的“容器”div - 页面、页面容器或包装器（我不确定这三个中的哪一个，只需尝试），然后“位置：绝对；底部：0；” 到您的“页脚容器”div。
I hope that helps you.
我希望这对你有帮助。
回答by sandeep
@denappel; give html & body 100% heightput footeroutside of your main div wrapper& give margin-bottom in minusaccording to the height of footer.
@德纳佩尔；根据页脚的高度给出html & body 100% height放在footer你的外面main div wrapper并给出 margin-bottom minus。
css:
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;
}
check this examplehttp://jsfiddle.net/sandeep/tCdPX/3/
检查这个例子http://jsfiddle.net/sandeep/tCdPX/3/
this functionally called stickyfooter
这个功能上称为stickyfooter
