让<body>填满整个屏幕？

Question

我在我的网页上使用径向渐变作为背景,如下所示:

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

它可以工作,但是当内容没有填满整个页面时,渐变会被切断.如何使<body>元素始终填满整个页面？

Answer 1

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

既不是`html {height:100%; }`也不是`身体{身高:100%; 对我来说已经足够了(Opera作为测试包括在内)最好的是`html,body {min-height:100%; 使用高度而不是最小高度,当我在页面中间展开一些可折叠div时,我的背景白色没有应用背景颜色.`min-height`修正了这个问题. (29认同)
似乎所有需要的是`html {height:100%; 实际上. (16认同)
如果它仍然不适合任何人，只需将“100%”更改为“100vh”。 (6认同)
我知道这是一个近 10 年前的问题，但只有当您的页面没有填满屏幕时，这个接受的答案才有效。由于我正在获取动态内容，它可能会也可能不会填充屏幕，所以我必须将 html 设置为 height: 100% 并将 body 设置为 min-height: 100% 才能获得所需的效果。 (2认同)

Answer 2

在我们的网站上,我们有内容为静态的页面,以及使用AJAX加载内容的页面.在一个页面(搜索页面)上,有些情况下AJAX结果不仅仅会填充页面,还会出现无法返回结果的情况.为了在所有情况下填充页面的背景图像,我们必须应用以下CSS:

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

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

height为了html和min-height为了body.

Answer 3

由于没有其他答案对我有用,我决定将此作为其他人寻找解决方案的答案,并找到同样的问题.html和body都需要设置,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和body)的高度设置为100%时,

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

背景不填充身体

Answer 4

我必须100%同时适用于html和body.

Answer 5

目标是使 <body> 元素占据屏幕的可用高度。

如果您不希望内容占据超过屏幕的高度，或者您打算制作内部可滚动元素，请设置

body {
  height: 100vh;
}

否则，当内容超出屏幕所能容纳的范围时，您希望 <body> 变得可滚动，因此设置

body {
  min-height: 100vh;
}

仅此一项就实现了目标，尽管有可能且可能是理想的改进。

删除 <body> 的边距。

body {
  margin: 0;
}

这样做有两个主要原因。

PS如果您希望背景是径向渐变，其中心位于屏幕中心，而不是像您的示例那样位于右下角，请考虑使用类似

body {
  height: 100vh;
}

body {
  min-height: 100vh;
}

Answer 6

尝试在主体级别使用视口（vh，vm）度量单位

html，body {margin：0; 填充：0; } body {min-height：100vh; }

使用vh单位表示正文上的水平边距，内边距和边框，并从最小高度值中减去它们。

我在体内的元素上使用vh，vm单位时产生了奇怪的结果，尤其是在调整大小时。