我在网页中使用径向渐变作为背景，如下所示：
background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));
这个方法能够奏效，但是当内容没有填满整个页面时，渐变将会被截断。如何让 <body> 元素始终填满整个页面呢？
如何让<body>标签填满整个屏幕？
175
- Ry-
6
9个回答
276
html, body {
margin: 0;
height: 100%;
}
- capdragon
8
29似乎只需要加上
html { height: 100%; } 就可以了。 - Ry-36“html { height: 100%; }”和“body { height: 100%; }”对我来说都不够用（已在Opera上测试）。最有效的方法是使用“html, body { min-height: 100%; }”。使用height而不是min-height会导致我在页面中间展开一些可折叠的div时，背景变成白色而没有应用背景颜色。使用“min-height”可以解决这个问题。 - Stephen P
1为什么只有在使用背景：线性渐变时才会出现这个问题，而简单背景却没有呢？ - ASEN
7如果对于某些人而言仍然无法正常运行，请将“100%”更改为“100vh”。 - PolymorphismPrince
2我知道这是一个近10年的问题，但是这个被接受的答案只适用于你的页面没有填满屏幕的情况。由于我正在获取动态内容，它可能会或可能不会填满屏幕，所以我不得不将html设置为高度：100％，并将body设置为最小高度：100％才能获得所需的效果。 - Moose
显示剩余3条评论
35
我们的网站有静态内容页面和通过 AJAX 加载内容的页面。在一个页面（搜索页面）上，当 AJAX 返回的结果超过页面容量或没有返回结果时，背景图片无法填满整个页面。因此我们需要应用以下 CSS 代码：
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
min-height: 100%;
width: 100%;
}
height 用于设置 html 元素的高度，min-height 用于设置 body 元素的最小高度。
- jwatts1980
4
2两者都不需要
width: 100%;。 - Ry-3由于display:block的特性。 - Valen
也可以只写
margin: 0;，不需要指定使用哪种单位的零。 - KameeCoding对我来说，这几乎可以，但是有点太高了。 - David Spector
24
由于其他答案对我都无效，所以我决定将这个作为一个答案发布给其他遇到相同问题的人。html和body都需要设置min-height，否则渐变不会填充整个body高度。
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;
}
- user3956566
1
对我来说，这有点太高了；在Chrome浏览器中，页面溢出了。 - David Spector
12
我必须将html和body都设置为100%。
- htrufan
7
目标是使 <body> 元素占用屏幕的可用高度。
如果您不希望内容超过屏幕高度，或者您计划使用内部可滚动元素，请设置
body {
height: 100vh;
}
否则，如果页面内容超出屏幕显示的范围，你想要元素可以滚动，请设置：
body {
min-height: 100vh;
}
仅通过这一步骤就可以达到目标，尽管有可能并且很可能需要进行优化。
移除<body>的外边距。
body {
margin: 0;
}
有两个主要原因需要这样做。
- <body> 达到了窗口的边缘。
- <body> 从一开始就没有滚动条。
P.S. if you want the background to be a radial gradient with its center in the center of the screen and not in the bottom right corner as with your example, consider using something like
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>- Rtzoor
4
我认为正确的方法是将CSS设置为以下内容：
我认为正确的方法是将CSS设置为以下内容：
html
{
overflow: hidden;
}
body
{
margin: 0;
box-sizing: border-box;
}
html, body
{
height: 100%;
}
- Martin Wantke
1
这个内容的重点部分与六年前被接受的答案相同，抱歉。 - Ry-
4
在body级别上尝试使用视口（vh，vm）作为度量单位
html，body { margin: 0; padding: 0; } body { min-height: 100vh; }
在body的水平边距，填充和边框方面使用vh单位，并从min-height值中减去它们。
我曾经在body内的元素中使用vh，vm单位时得到过奇怪的结果，特别是在重新调整大小时。
- Mike Wright
3
如果你 有 边框或填充，那么 解决方案。
产生了不完美的渲染。
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中测试)
- Vrokipal
1
你的回答只与你有关，因为你给
body 标签添加了一个边框。如果没有这个边框，body 将会完全填充视口，可以通过添加背景颜色来查看。那个问题的正确答案已经在7年前被接受，并且仍然有效。 - Niss2
我尝试了以上所有解决方案，我不会贬低任何一种方法，但在我的情况下，它们都没有起作用。
对我来说，问题是由于 <header> 标签的 margin-top 为5em，而 <footer> 的 margin-bottom 为5em 导致的。我将它们移除，改为使用一些 padding（分别为顶部和底部）。我不确定替换 margin 是否是解决问题的理想方法，但重点是，如果你的 <body> 中的第一个和最后一个元素有一些边距，你可能需要查看并删除它们。
我的 html 和 body 标签具有以下样式：
body {
line-height: 1;
min-height: 100%;
position: relative; }
html {
min-height: 100%;
background-color: #3c3c3c; }
- dinika saxena
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
body { width: 100%; height: 100%; }没有生效吗？ - Alexbody { width: 100%; height: 100%; }不起作用。我猜我也必须将它应用到<html>上。 - Ry-html{height:100%}的答案。 - Temani Afif