高さ：100％または最小高さ：HTMLおよび本体要素の場合は100％ですか？

Question

レイアウトを設計する際に、html, bodyの要素 'height〜100%を設定しましたが、場合によってはこれが失敗するため、何を使用する必要がありますか？

html, body { 
    height: 100%; 
} 

または

html, body { 
    min-height: 100%; 
} 

まあ、これは意見ではありません各メソッドは、独自の欠陥を持っているよう基づき、その推奨のために移動するための方法とその理由は何ですか？

Answer 1

htmlとbodyに背景画像を適用しようとすると、ブラウザウィンドウ全体がいっぱいになりません。代わりにこれを使用します。

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
} 

私の推論が与えられている（私は、このように背景を適用する方法を総合的に解説）here：

ところで、あなたが持っている理由は、指定しheightとmin-heighthtmlおよびbodyには、どちらの要素も固有の高さを持たないためです。どちらもデフォルトでheight: autoです。これは高さが100％のビューポートなので、height: 100%がビューポートから取得され、コンテンツのスクロールを可能にするために最小限はbodyに適用されます。

彼らは、ビューポートの高さを超えて成長し始めると最初の方法は、両方のheight: 100%を使用して、その内容を拡大してからbodyを防ぐことができます。技術的にはこれはではありません。のコンテンツはスクロールしませんが、bodyにはフォールドの下にギャップが残ることがありますが、これは通常は望ましくありません。両方のmin-height: 100%を使用して

第二の方法は、htmlは、明示的なheightを持っていない限り、割合がmin-heightがbody上では動作しませんので、bodyがhtmlの完全な高さまで拡大することはありません。完全を期すために

、section 10 of CSS2.1は、すべての詳細が含まれていますが、それはあなたが、私がここで説明した内容を超えたものに興味を持っていないのであれば、あなたはそれをスキップすることができますので、読んで畳み込まれ極めてです。