让 <body> 填满整个屏幕？答案

【问题标题】：Make <body> fill entire screen?让 <body> 填满整个屏幕？
【发布时间】：2020-10-20 23:08:45
【问题描述】：

我在网页上使用径向渐变作为背景，如下所示：

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

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

【问题讨论】：

而body { width: 100%; height: 100%; } 不起作用？
那一点css应用于body标签对吧？它在最新的 Chrome jsfiddle.net/kdjFD/embedded/result 中非常适合我。你在测试什么浏览器？
不，body { width: 100%; height: 100%; } 不起作用。我想我也必须将其应用于<html>。
不要使用旧的 -webkit- 语法。使用官方 W3C 语法
@TimNguyen：这个问题是三年前提出的，当时还没有浏览器支持。

标签： html css radial-gradients

【解决方案1】：

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

【讨论】：

看来其实只需要html { height: 100%; }。
html { height: 100%; } 和 body { height: 100%; } 对我来说都不够（包含 Opera 作为测试）最有效的是 html, body { min-height: 100%; } 使用高度而不是最小高度使我的背景变成白色而没有背景-color 当我在页面中间展开一些可折叠的 div 时应用。 min-height 解决了这个问题。
为什么只有在使用背景时才会出现这个问题：线性渐变而不是简单背景
@ASEN 你有没有弄清楚为什么会这样？
如果它仍然不适合任何人，只需将 100% 更改为 100vh。

【解决方案2】：

在我们的网站上，我们有内容是静态的页面，以及使用 AJAX 加载内容的页面。在一个页面（搜索页面）上，有些情况下 AJAX 结果会填满整个页面，有些情况下它不会返回任何结果。为了让背景图片在所有情况下都能填满页面，我们必须应用以下 CSS：

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

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

height 用于html，min-height 用于body。

【讨论】：

他们都不需要width: 100%;。
因为显示：块性质
还有margin: 0;就够了，不用指定你用哪个单位的零

【解决方案3】：

由于没有其他答案对我有用，因此我决定将其发布为其他寻找解决方案的人的答案，他们也发现了同样的问题。 html 和 body 都需要设置为min-height 否则渐变不会填充 body 高度。

我找到Stephen P's comment 来提供正确答案。

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;
}

【讨论】：

【解决方案4】：

我必须对 html 和 body 应用 100%。

【讨论】：

【解决方案5】：

目标是让

元素占据屏幕的可用高度。

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

body {
  height: 100vh;
}

否则，您希望

在内容多于屏幕容纳不下时变得可滚动，因此请设置

body {
  min-height: 100vh;
}

仅此一项就可以实现目标，尽管需要进行可能且可能是理想的改进。

移除

的边距。

body {
  margin: 0;
}

这样做有两个主要原因。

到达窗口边缘。
从一开始就不再有滚动条。

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

body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>test</title>
</head>
<body>
</body>
</html>

【讨论】：

【解决方案6】：

尝试在身体级别使用视口 (vh, vm) 测量单位

html, body { 边距：0;填充：0； } 身体{最小高度：100vh； }

对 body 的水平边距、内边距和边框使用 vh 单位，并从 min-height 值中减去它们。

我在身体内的元素上使用 vh,vm 单位得到了奇怪的结果，尤其是在重新调整大小时。

【讨论】：

【解决方案7】：

我认为基本上正确的方法是将 css 设置为：

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}

【讨论】：

这里的重要部分与六年前接受的答案相同，对不起。

【解决方案8】：

我尝试了上述所有解决方案，我并没有诋毁其中任何一个，但就我而言，它们都不起作用。

对我来说，问题是因为<header> 标签的margin-top 为5em 而<footer> 的margin-bottom 为5em。我删除了它们，而是放了一些padding（分别是顶部和底部）。我不确定替换边距是否是解决问题的理想方法，但关键是，如果您的 <body> 中的第一个和最后一个元素有一些边距，您可能需要查看并删除它们。

我的html 和body 标签具有以下样式

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

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

【讨论】：

【解决方案9】：

如果你have 有边框或内边距，那么solution

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;
}

正如Martin 指出的那样，尽管不需要overflow: hidden。

（2018 - 使用 Chrome 69 和 IE 11 测试）

【讨论】：

您的答案只与您相关，因为您为body 标签添加了边框。如果没有该边框，body 将准确填充视口的 100%，例如，您可以使用背景颜色看到它。该问题的正确答案在 7 年前已被接受。