web-dev-qa-db-ja.com

なぜ最小高さが機能しないのですか？

これがスクープです。

Body要素の背景にグラデーションを適用しています。次に、背景の.png画像が適用されたコンテナ（ボディの直後）があります。グラデーションは常に少なくとも100％のウィンドウの高さまで拡大しますが、コンテナー（＃body2）は拡大しません。

これが機能しない理由についての提案はありますか？私のWebページでHTMLを調べることができます： http://www.savedeth.com/parlours/

htmlbackground-imagecss
34
Dave

html、body、およびheight: 100%要素で#body2を指定します（1358行目）。

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

IE 6ではテストされていませんが、7では動作します。

30
wsanville

％の代わりにvhを使用すると、余分なトリックを使用することなく機能しました。

これは私が持っているものです：

html, body, .wrapper {
    min-height: 100vh;
}

.wrapperは、コンテナ/ラッパーに適用するクラス、または画面の高さ全体を伸ばしたいコンテンツの本体です。

これは、ラッパー内のコンテンツが画面の高さで許容される範囲よりも小さい場合や大きい場合に期待どおりに機能します。

これは ほとんどのブラウザ で動作するはずです。

17
Neceros

Min-heightを100％に設定すると、スペースを埋める要素と同じ高さになります。ピクセル単位で最小高さを表現します。また、IE6-では独自のルールセットが必要であることに注意してください。 http://davidwalsh.name/cross-browser-css-min-height を参照してください。

3
Michael Copeland

position: absolute;ほとんどの場合に機能します

1
harris