web-dev-qa-db-ja.com

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

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

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

それは機能しますが、コンテンツがページ全体を満たさない場合、グラデーションは切り捨てられます。常に<body>要素をページ全体に表示するにはどうすればよいですか？

htmlcssradial-gradients
109
Ry-
html, body {
    margin: 0;
    height: 100%;
}
173
capdragon

このサイトには、コンテンツが静的なページと、AJAXでロードされるページがあります。 1ページ（検索ページ）で、AJAXの結果がページいっぱいになる場合と、結果が返されない場合がありました。背景画像がすべての場合にページを埋めるために、次のCSSを適用する必要がありました。

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

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

heightにはhtml、bodyにはmin-height。

23
jwatts1980

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

私は Stephen P'scomment を見つけて、これに対する正しい答えを提供しました。

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

background filling body height

HTML（またはHTMLと本文）の高さを100％に設定すると、

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

background not filling body

13
Yvette Colomb

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

11
htrufan

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

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

本体の水平方向のマージン、パディング、およびボーダーにvh単位を使用し、最小高さ値からそれらを減算します。

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

3
Mike Wright

上記のすべてのソリューションを試してみましたが、いずれも信用を落とすわけではありませんが、私の場合は機能しませんでした。

私にとっては、<header>タグのmargin-topが5emで、<footer>のマージン底が5emだったために問題が発生しました。それらを削除し、代わりにpadding（それぞれ上部と下部）を配置しました。マージンを置き換えることが問題の理想的な解決方法かどうかはわかりませんが、ポイントは、<body>の最初と最後の要素にマージンがある場合、それを調べて削除することです。

htmlおよびbodyタグのスタイルは次のとおりです

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

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

have ボーダーまたはパディングの場合、- solution

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

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

not good

境界線またはパディングが存在する場合に適切にするには

good

代わりに使用する

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

Martin 指摘されていますが、overflow: hiddenは必要ありません。

（2018-Chrome 69およびIE 11でテスト済み）

1
Vrokipal

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

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}
0
Martin Wantke