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;notを使用していたため、機能しませんでしたheight: 70%;

!important プロパティを持つルールは、そのルールが CSS ドキュメントのどこに表示されても常に適用されます。

したがって、この行を削除することをお勧めします。これで機能します。 CSS での !important の意味
について詳しくは、こちらをご覧ください。.

于 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 に答える