<body>を画面全体に表示しますか？

129

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

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

動作しますが、コンテンツがページ全体に満たない場合、グラデーションは切り取られます。<body>要素を常にページ全体に埋め込むにはどうすればよいですか？

html css radial-gradients

— Ry-
ソース

2

そしてbody { width: 100%; height: 100%; }動作しませんか？

— アレックス

そのCSSのビットはボディタグに適用されていますよね？これは、最新のChrome jsfiddle.net/kdjFD/embedded/resultで私にとってうまく機能します。どのブラウザをテストしていますか？

— LeRoy 2011

4

いいえ、body { width: 100%; height: 100%; }機能しません。私<html>もそれを適用する必要があると思います。

— Ry-

古い-webkit-構文を使用しないでください。公式のW3C構文を使用

— Tim Nguyen 14年

@TimNguyen：この質問は、3年前にブラウザでサポートされていなかったときに行われました。

— Ry-

201

html, body {
    margin: 0;
    height: 100%;
}

— Capdragon
ソース

18

それが取るすべてはhtml { height: 100%; }実際にあるようです。

— Ry-

30

どちらhtml { height: 100%; }もbody { height: 100%; }十分ではありませんでした（テストとしてOperaが含まれていました）html, body { min-height: 100%; }最小高さの代わりに高さを使用すると、ページの中央にある折りたたみ可能なdivを展開したときに背景色が適用されずに背景が白のままになりました。min-height修正しました。

— Stephen P

1

この問題が発生するのは、背景を使用している場合のみである：単純な背景ではなく線形グラデーション

— ASEN

@ASENなぜそれが起こったのか理解したことがありますか？

— レース

2

それでもだめな場合は、に変更100%してください100vh。

— PolymorphismPrince

27

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

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

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

height用htmlとmin-heightのためにbody。

— jwatts1980
ソース

1

どちらも必要ありませんwidth: 100%;。

— Ry-

1

表示のため：ブロックの性質

— Valen

またmargin: 0;、十分です。ゼロを使用する単位を指定する必要はありません

— KameeCoding

15

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

私はこれに対する正しい答えを提供するためにスティーブン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;
}

背景がボディを埋めていません

— コミュニティ
ソース

12

HTMLと本文の両方に100％を適用する必要がありました。

— フトルファン
ソース

4

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

html、body {margin：0; パディング：0; } body {min-height：100vh; }

本文の水平マージン、パディング、ボーダーにvh単位を使用し、min-height値からそれらを減算します。

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

— マイク・ライト
ソース

1

私は大体正しい方法は、これをcssに設定することだと思います：

html
{
    overflow: hidden;
}

body
{
    margin: 0;
    box-sizing: border-box;
}

html, body
{
    height: 100%;
}

— マーティン・ワンケ
ソース

これの重要な部分は、6年前に受け入れられた回答と同じです。申し訳ありません。

— Ry-

1

私は上記の解決策をすべて試しましたが、それらのどれも信用していませんが、私の場合、それらはうまくいきませんでした。

私にとっては、<header>タグmargin-topのaemが5em <footer>、マージンボトムが5em だったために問題が発生しました。私はそれらを取り除き、代わりにいくつかpadding（それぞれ上部と下部）を置きました。マージンの交換が問題の理想的な修正であったかどうかはわかりませんが、要点は、最初と最後の要素に<body>マージンがある場合は、それを調べて削除することです。

私htmlとbodyタグには次のスタイルがありました

body {
  line-height: 1;
  min-height: 100%;
  position: relative; }

html {
  min-height: 100%;
  background-color: #3c3c3c; }

— ディニカサクセナ
ソース

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でテスト済み）

— ヴロキパル
ソース

あなたの答えはあなたにのみ関連し、あなたがbodyタグにボーダーを追加したからです。その境界がないとbody、はビューポートのちょうど100％を占め、たとえば背景色でそれを見ることができます。7年前にその質問に対する正解が受け入れられましたが、まだ有効です。

— Niss

-1

これは私にとってはうまくいきます：

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .test{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='test'>Some text</div>
</body>
</html>

— GigiProve
ソース

質問の内容ではありませんでした。申し訳ありません。あなたのためにうまくいく何かを見つけてうれしいです。

— Ry-