149

次のように、Web ページの背景として放射状グラデーションを使用しています。

background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));

機能しますが、コンテンツがページ全体を埋めていない場合、グラデーションが途切れます。<body>常にページ全体を要素で埋めるにはどうすればよいですか?

4

9 に答える 9

242 
html, body {
    margin: 0;
    height: 100%;
}
于 2011-04-19T20:13:45.463 に答える
33

私たちのサイトには、コンテンツが静的なページと、AJAX で読み込まれるページがあります。1 つのページ (検索ページ) で、AJAX の結果がページいっぱいになる場合と、結果が返されない場合がありました。すべてのケースで背景画像がページ全体に表示されるようにするには、次の CSS を適用する必要がありました。

html {
   margin: 0px;
   height: 100%;
   width: 100%;
}

body {
   margin: 0px;
   min-height: 100%;
   width: 100%;
}

heightとhtmlのmin-height場合body。

于 2013-06-13T18:58:08.170 に答える
20

他の回答はどれもうまくいかなかったので、同じ問題を見つけた解決策を探している他の人への回答としてこれを投稿することにしました。html と本文の両方を設定する必要がありました。そうしmin-heightないと、グラデーションが本文の高さを埋めません。

これに対する正しい答えを提供するStephen P の コメントを見つけました。

html {
    /* To make use of full height of page*/
    min-height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}

背景塗りつぶしボディの高さ

HTML (または HTML と本文) の高さを 100% に設定すると、

html {
    height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}

背景がボディを埋めていない

于 2015-05-24T21:18:31.297 に答える
12

html と body の両方に 100% を適用する必要がありました。

于 2011-11-24T12:53:47.823 に答える
4

ボディ レベルでビューポート (vh、vm) の測定単位を使用してみてください

html、本文 { マージン: 0; パディング: 0; } ボディ {最小高さ: 100vh; }

本文の水平方向のマージン、パディング、および境界線に vh 単位を使用し、それらを min-height 値から差し引きます。

特にサイズ変更時に、ボディ内の要素に vh,vm ユニットを使用すると、奇妙な結果が得られました。

于 2016-07-25T18:11:31.220 に答える
1

ボーダーまたはパディングがある場合、解決策

html, body {
    margin: 0;
    height: 100%;
}
body {
    border: solid red 5px;
    border-radius: 2em;
}

不完全なレンダリングを生成します

良くない

境界線またはパディングがある場合に正しく表示するには

良い

代わりに使用

html, body {
    margin: 0;
    height: 100%;
}
body {
    box-sizing: border-box;
    border: solid red 5px;
    border-radius: 2em;
}

マーティンが指摘したように、必要ではoverflow: hiddenありませんが。

(2018 - Chrome 69 および IE 11 でテスト済み)

于 2018-10-22T14:23:39.967 に答える