内部 div 100% 高度在最小高度的 div 中不起作用答案

【问题标题】：Inner div 100% height not working inside a div with min-height内部 div 100% 高度在最小高度的 div 中不起作用
【发布时间】：2012-06-25 02:05:54
【问题描述】：

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

【问题讨论】：

标签： html css layout

【解决方案1】：

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

【讨论】：

【解决方案2】：

height: auto !important;

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

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

所以我建议您删除此行，它会起作用。
寻找更多关于What does !important mean in CSS?的信息。

【讨论】：

我从这里获取了最小高度 sn-p：css-tricks.com/snippets/css/cross-browser-min-height 并认为这是最佳实践。甚至没有试图摆弄那一点。从现在开始我不会那么容易受骗了:))

【解决方案3】：

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

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

【讨论】：