CSS高度100％问题 [英] CSS height 100% issue

问题描述

我知道有很多关于css 100％高度问题的问题。
但是我试着按照那里的说明，仍然高度不是100％，
所以我想我会再问问题。

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.

您可以看到问题的网站是：

The site where you can see the problem is:

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上。

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.

如果任何人都能帮助你，这将是巨大的！

If anybody could help that would be great!

推荐答案

很多人建议职位：绝对; bottom：0;

A number of people suggested position:absolute; bottom: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.

如果你可以给容器一个固定的高度，那么，这是理想的，因为高度：100％然后将工作在子元素。如果内容太大，您可以将背景放在子对象上，并在父对象上显示，因此内容仍会显示。这有助于，但它仍然可以断裂，除非孩子的宽度与父母相同。

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.

如果这不起作用，我建议在em中使用min-height像素。这将确保高度填充父级，并且如果内容太长，扩展。这对 www.baka.ca 的客户评论效果最佳。

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

这篇关于CSS高度100％问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！