5

我有 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/

4

3 回答 3

2

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

于 2012-06-24T17:58:12.613 回答
1 
height: auto !important;

永远不要使用!important，因为它不能被覆盖，使用它是有害的。它没有用，因为它总是height: auto;不使用height: 70%;

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

所以我建议你删除这条线，它会起作用。
寻找更多关于!important 在 CSS 中是什么意思的信息？.

于 2012-06-24T18:05:54.197 回答
0

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

#parent {
  min-height: 70%;
  height: 100% !important;
  height: 100%;  
  background-color: #AAD;
}
于 2012-06-24T18:00:37.987 回答