6

私が使用しているコードは次のとおりです。

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でのみ発生します:(

Opera では正しく動作します。最初の DIV は body の 100% になり、2 番目は最初の div の 100% になります...

これを他のブラウザでも機能させる方法はありますか?

4

6 に答える 6

3

仕様書通り

包含ブロックの高さが明示的に指定されておらず (つまり、コンテンツの高さに依存する)、この要素が絶対的に配置されていない場合、パーセンテージ値は '0' ('min-height' の場合) または 'none' として扱われます。 (「最大高さ」の場合)。

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

CSS3 ドラフトでは、ビューポートに相対的な単位を使用できます。したがって、この特別なケースでは、設定できます 

div {
    height: auto;
    min-height: 100%;  /* fallback for browsers that doesn't support "vh" */
    min-height: 100vh; /* vh == 1% of viewport height */
}
于 2013-08-10T20:03:02.273 に答える
2

以下を置き換えてみてください：

height: auto !important;

に:

height: inherit !important;

この場合は機能しますが、高さプロパティは最小高さではなくdivのサイズを設定します。

于 2013-08-08T13:32:26.537 に答える
1

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

私は要素に使用position: absoluteします。divその後、目的の結果が得られます。

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

これが機能するのは、絶対配置によってdiv要素がドキュメントの流れから除外され、要素の高さが指定どおりになるためです。top要素のorbottomを宣言しないのでdiv、それらの上部の位置は、それらの位置が静的であるかのように同じになります。

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

于 2013-08-09T02:15:46.293 に答える
1

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

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

CSS :

* {
    margin: 0;
    padding: 0;
}

height: auto !important;ブラウザは子に基づいて高さを計算し、これがデフォルト値であるため、使用しないでください。

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

そして価値のある使用のためにborder-box。この値は、この要素の幅と高さ (および最小/最大プロパティ) を指定し、要素の境界ボックスを決定します。widthコンテンツの幅と高さは、指定されたandheightプロパティからそれぞれの辺のボーダーとパディングの幅を差し引いて計算されます。

このbox-sizingプロパティは、IE(8+)、Opera(8.5+)、Chrome(*)、および Safari(3) でサポートされています。

IE 6/7 の場合、 Christian Schepp Schaeferbox-sizing: border-boxによるポリフィルを使用できます

Chris Coyierbox-sizingによるこの記事。

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

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;
}
于 2013-08-09T00:28:31.200 に答える