高さ：100％または最小-高さ：htmlおよびbody要素の場合は100％？

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

html, body {
   height: 100%;
}

または

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

ええと、これは意見に基づくものではありません。それぞれの方法には独自の欠陥があるので、推奨される方法とその理由は何ですか？

あなたはに背景画像を適用しようとしている場合htmlと、bodyブラウザウィンドウ全体埋めることに、どちらもありません。代わりにこれを使用してください：

html {
   height: 100%;
}

body {
   min-height: 100%;
}

私の推論はここにあります（この方法で背景を適用する方法を全体的に説明します）：

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

最初の方法は、height: 100%両方で使用しbodyて、ビューポートの高さを超えて拡大し始めると、コンテンツが拡大するのを防ぎます。技術的には、これによってコンテンツのスクロールが妨げられることはありませんbodyが、折り目の下にギャップが残るため、通常は望ましくありません。

2番目の方法は、min-height: 100%両方で使用しますが、明示的ながない限り、パーセンテージを使用しても機能しないため、のbody高さ全体に拡張するhtmlことmin-heightはありません。bodyhtmlheight

完全を期すために、CSS2.1のセクション10にはすべての詳細が含まれていますが、これは非常に複雑な読み物なので、ここで説明した以外に興味がない場合はスキップできます。

ビューポートの高さ（vh）単位を使用できます。

body {
    min-height: 100vh;
}

親の高さではなく画面を基準にしているため、HTMLの高さは必要ありません：100％。