100％のmin-height他のブラウザでオペラでの作業ではなく、

Question

はここで私が使用しているコードです：これも失敗した

html,body{ 
    height: 100%; 
} 

div{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%;    /* this is for older IE */ 
} 

http://jsfiddle.net/YYcLJ/

（しかし、Operaで動作します）：

div{ 
    min-height: 100%; 
    height: auto; 
} 

したがって、htmlまですべてのdivに100％の高さを適用する必要があります。しかし、これは最初のDIV :(

オペラで、それが正常に動作するために起こります。まず、DIVは、身体の100％であることを得て、第二は、最初のdivの100％である、というように...

がありますどのような方法があまりにも他のブラウザでは、この作品を作るために？そのために

Answer 1

、パーセント値を含むブロックの高さは（すなわち、それはコンテンツの高さに依存する）明示的に指定されておらず、この要素が絶対的に配置されていない場合

を語ります'min-height'の場合は '0'、 'max-height'の場合は 'none'として扱われます。

この場合、Opera/Prestoの動作はバグです。 Opera 15+が正しく動作することに注意してください。

CSS3 draftでは、ビューポートに関連する単位を使用できます。したがって、この特殊なケースでは、あなたは

div { 
    height: auto; 
    min-height: 100%; /* fallback for browsers that doesn't support "vh" */ 
    min-height: 100vh; /* vh == 1% of viewport height */ 
} 

Answer 2

を、あなたはそれを動作させるために100%;のheightを持っているだけdivを与える必要があります。 プラス、あなたの階層がある道を、あなたは変更する必要がありますdivsのdisplayもあります。

このソリューションはクロスブラウザで動作します。確認してもいい。私は、これはあなたが探していたものであると思います

html,body{ 
    height: 100%; /* Change 01. Div with height of 100% */ 
} 

div{ 
    height: 100%; 
} 

.d1{ 
    background: #3cc; 
    display:table; /* Change 02. Changing display of Divs */ 
    width:100%; 
    height:100%; 
} 

.d2{ 
    background: #ddd; 
    display:table-row; /* Change 03. Changing display of Divs */ 
} 

.d3{ 
    background: #c00; 
    display:table-cell; /* Change 04. Changing display of Divs */ 

} 

：

<div class="d1"> 
    <div class="d2"> 
     <div class="d3"> 
      hi 
     </div> 
    </div> 
</div>  

CSS：ここ

はWORKING SOLUTION

HTMLです。それは作業

この場合

height: inherit !important; 

が、それはまだheightプロパティは、divタグではない分、高さのサイズを設定：への

height: auto !important; 

：

Answer 3

は置き換えてみてください。

Answer 4

ここにはXY Problemというビットがあります。これは、古代のInternet Explorerで動作させるために最小高さの回避策を実装しようとしたようですが、その回避策は他のブラウザでは機能していません。

希望のクロスブラウザを入手するにはmin-height .d3にheight:auto;を使用し、IE 6以下のIE条件付きコメントを追加してみてください。

Working Example

html, body { 
    height: 100%; 
} 
div { 
    height:100%; 
    min-height:100%; 
} 
.d1 { 
    background: #3cc; 
} 
.d2 { 
    background: #ddd; 
} 
.d3 { 
    background: #c00; 
    height:auto; 
} 

IE6をサポートするために、HTMLドキュメントにこれを追加し、下：

<!--[if lte IE 6]> 
<style> 
.d3 { 
    height: 100%; 
} 
</style> 
<![endif]--> 

テスト済み

とFirefox、クロム、サファリ、オペラ、IE10、IE9、での作業IE8、IE7、IE6、およびIE5。

すべてのdivはheight:100%;とmin-height:100%;です。 .d3 height:100%;は、selector's specificityのためにheight:auto;によって上書きされていますが、まだmin-height:100%;を保持しています。 （ありがたいことに？）IE扱い「高さ」「分の高さが」想定しているかためのInternet Explorer 6の場合と条件付きCSS下

は.d3と height:100%;

この作品でheight:auto;をオーバーライドするために適用されます。処置されるべき。
-CSS Tricks

Answer 5

まず重要なこと、CSSリセットスクリプトを追加してみてください。

デモ用marginとpaddingを0にリセットしました。

CSS：ブラウザが子に基づいて高さを計算し、これがデフォルト値であるため、

* { 
    margin: 0; 
    padding: 0; 
} 

はその後height: auto !important;を使用しないでください。

プロパティを追加すると、特定の要素を特定の方法で領域に合わせて定義できます。

そして、値の使用のためにborder-box。この値は、この要素の幅と高さ（および最小/最大のプロパティ）で指定され、要素の境界ボックスを決定します。コンテンツの幅と高さがbox-sizing性がIEでサポートされている指定widthとheight特性

から各辺の境界とパディング幅を減算することにより算出される（8+）、オペラ（8.5+）、クロム（* ）、Safari（3）などがあります。

はIE 6/7のためには、Chris CoyierによってChristian Schepp Schaefer

この記事についてbox-sizingによってbox-sizing: border-box用ポリフィルを使用することができます。

そして、この完全なソリューションとクロスブラウザが動作します。 Demo

HTML：

<div class="first"> 
    First DIV 
    <div class="second"> 
     Second DIV 
     <div class="third"> 
      <div class="fourth"> 
       Fourth DIV 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 
html,body{ 
     height: 100%;   /* ie 6 will use this instead of min-height */ 
     min-height: 100%;  /* ie 6 will ignore this */ 
} 

div{ 
    min-height: 100%; 
    width:100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    box-sizing: border-box; 
    *behavior: url(pathto/boxsizing.htc); /* Add the behavior/HTC after every box-sizing: border-box. You must add prefix with a star so IE6/7 can see it */ 
} 

.first{ 
    padding:50px; 
    background: red; 
} 

.second{ 
    padding:25px; 
    background: green; 
} 

.third{ 
    background: yellow; 
} 

.fourth{ 
    background: brown; 
} 

Answer 6

フィドル：http://jsfiddle.net/YYcLJ/5/

私はdiv要素にposition: absoluteを使用します。それから、あなたは望みの結果を得るでしょう。

div{ 
    position: absolute; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    width: 100%; 
} 

絶対位置が指定されている彼らの高さがあることを許可する文書の流れのうちdiv要素を取るので、これは動作します。div要素のtopまたはbottomを宣言していないため、その上位位置は静的であったのと同じになります。 specificationとして

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height