Question

我有div（#child），它不会扩展到它的父级（#parent）的完整高度。我为html和body设置了高度。如果我将父级的高度设置为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/

Answer 1

删除!important;属性时，它会起作用。也许那就是问题？我尝试了其他几种方法，但它们没有用，所以上面的解决方案可能是唯一的，我想。

Answer 2

height: auto !important;

不要使用!important，因为它无法覆盖，使用它是有害的。它无效，因为它始终使用height: auto;而不是height: 70%;

具有！important属性的规则将始终不应用这个规则出现在CSS文档中的地方。

所以我建议你删除这一行，它会起作用。
查找有关What does !important mean in CSS?的更多信息。

Answer 3

我不确定为什么这不起作用，但这会起作用

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

内部div 100％高度不能在具有最小高度的div内工作

3 个答案: