0

何らかの理由で、ネストされた要素はmin-height、特定のブラウザーで祖父母の高さを継承しません。

<html style="height: 100%">
    <body style="min-height: 100%">
        <div style="min-height: 100%; background: #CCC">
            <p>Hello World</p>
        </div>
    </body>
</html>

さまざまなブラウザー バージョン間であまりテストを行っていませんが、Chrome 26 と Opera 12.14 では、期待どおりに表示され、左上隅に Hello World が表示され、画面の大部分が灰色の背景で覆われています。

ただし、IE 9 と Firefox 20 では、灰色の背景はテキストの 1 行の高さにすぎません。
さらにテストし、次を追加します。

position: relativediv を変更する
min-height: inheritと、div も何も変更されず
position: absolute、幅も変更されませんがheight、背景がテキストのみをカバーする IE 9 を除く上記のすべてのブラウザーで 100% です。
position: fixedに似ていposition: absoluteますが、IE 9 が幅 100% の元の動作に戻る点が異なります。
float: leftに似ていますがposition: absolute、Firefox 20 では背景も縮小されてテキストのみが表示されます。

http://www.w3.org/TR/CSS2/visudet.html#the-height-propertyから:

包含ブロックの高さが明示的に指定されておらず (つまり、コンテンツの高さに依存する)、この要素が絶対位置に配置されていない場合、値は「auto」と計算されます。

min-height明示的と見なされますか？それがブラウザ間の混乱だと思います。ではposition: absolute、Firefox が修正され、IE 9 だけが予期しない動作をします (これは IE であるため、それほど予期しないものではありません)。

主要なブラウザ間でこれを一貫させることは可能ですか?

JavaScript を必要とする回答や、固定の高さの本文を提案しないでください。それらが可能な回避策であることは知っていますが、私が達成しようとしているものではありません。を使用position: absoluteすると、フローから要素が引き出されるため、レイアウトも壊れます。動的にサイズ変更された要素の下に配置するには、唯一の回避策は JavaScript です。

4

1 に答える 1

0

まず、あなたの観察：

Chrome 26 と Opera 12.14 では、期待どおりに表示されます。グレーの背景が画面の大部分を覆い、左上隅に Hello World が表示されます。

私のChromeバージョン26では、テキストの1行の高さの灰色の背景しか表示されません。(Firefox や IE9 と同様)。bodyを含む の高さがdiv明示的に指定されていないため、引用元のw3仕様によると、これは正確に正しいと思います。

display: table、display: table-rowおよび で何かを行うことができますdisplay: table-cell。その場合はまったく必要ありませんmin-height。このjsFiddleをChrome 26、Safari 5.1.7、Firefox 20、IE10、IE9モードのIE10、IE8モードのIE10でテストしましたが、これらすべてのブラウザでまったく同じようにレンダリングされ、IE7モードでIE10を使用すると壊れ始めます.

CSS

html {
  display: table;
  height: 100%;
  width: 100%;
}
body {
  display: table-row;
}
div {
  display: table-cell;
  background: #CCC;
}
于 2013-04-20T03:23:44.983 に答える