内分区100%高度不工作在一个与米高的分区。

I have div (#child) which won't expand to the full height of it's parent (#parent). I've set the height for both html and body. It works if I set the parent's height as 100%, but I want the parent to have a minimum height, and the child to expand to the parent's full height.

我有div (#child)，它不会扩展到父(#parent)的高度。我已经为html和正文设置了高度。如果我将父节点的高度设置为100%，那么它就可以工作了，但是我希望父节点的高度为最小，并且子节点扩展到父节点的完全高度。

HTML:

<html>
    <body>
        <div id="parent">
          <div id="child">
              <p>This area should be have the same height as it's parent.</p>
           </div>
        </div>
    </body>
</html>

CSS:

html, body, header, h1, p { margin: 0; padding: 0; }

html         { background-color: #DDD; height: 100%; }
body         { background-color: #DAA; height: 100%; }

#parent {
  min-height: 70%;
  height: auto !important;
  height: 70%;

  background-color: #AAD;
}

#child {
  height: 100%; /* why isn't this working ? */

  width: 80%;
  margin: auto;    
  background-color: #ADA;
}

JSFiddle: http://jsfiddle.net/nxVNX/11/

JSFiddle:http://jsfiddle.net/nxVNX/11/

3 个解决方案

#1

height: auto !important;

Don't ever use !important, because it cannot be overriden, work with it is harmfull. It didn't work because it always used height: auto; not height: 70%;

千万不要使用!重要的是，因为它不能过量，使用它是有害的。它不能工作，因为它总是用高度:自动;不高:70%;

A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

具有!important属性的规则将始终被应用，无论该规则出现在CSS文档的什么位置。

So i recommend to you remove this line and it will works.
Have look for more information about What does !important mean in CSS?.

所以我建议你移走这条线，它会起作用。在CSS中什么是重要的?

#2

It works when you remove the !important; property. Maybe that's the problem? I tried several other methods, but they didn't work, so the solution above could be the only one, I guess.

当你删除了!重要的;财产。也许这就是问题所在?我尝试了其他几种方法，但都没有用，所以我想上面的方法可能是唯一的一种。

#3

Am not sure why this is not working , but this will work

我不知道为什么这行不通，但这行得通吗

#parent {
  min-height: 70%;
  height: 100% !important;
  height: 100%;  
  background-color: #AAD;
}

#1

height: auto !important;