Html 让 <body> 填满整个屏幕？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5721904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make <body> fill entire screen?
提问by Ry-
I'm using a radial gradient as the background on my webpage, like so:
我在我的网页上使用径向渐变作为背景，如下所示：
background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));
It works, but when the content does not fill the whole page the gradient is cut off. How can I make the <body>element fill the entire page, always?
它有效，但是当内容没有填满整个页面时，渐变会被切断。如何让<body>元素始终填满整个页面？
回答by capdragon
html, body {
margin: 0;
height: 100%;
}
回答by jwatts1980
On our site we have pages where the content is static, and pages where it is loaded in with AJAX. On one page (a search page), there were cases when the AJAX results would more than fill the page, and cases where it would return no results. In order for the background image to fill the page in all cases we had to apply the following CSS:
在我们的网站上，我们有内容是静态的页面，以及使用 AJAX 加载的页面。在一个页面（搜索页面）上，有些情况下 AJAX 结果会填满整个页面，有些情况下它不会返回任何结果。为了让背景图像在所有情况下都填充页面，我们必须应用以下 CSS：
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
min-height: 100%;
width: 100%;
}
heightfor the htmland min-heightfor the body.
height对于html和min-height对于body。
回答by Yvette
As none of the other answers worked for me, I decided to post this as an answer for others looking for a solution who also found the same problem. Both the html and body needed to be set with min-heightor the gradient would not fill the body height.
由于其他答案都不适合我，我决定将此作为答案发布给其他寻找解决方案的人，他们也发现了同样的问题。html 和 body 都需要设置，min-height否则渐变不会填充 body 高度。
I found Stephen P'scommentto provide the correct answer to this.
html {
/* To make use of full height of page*/
min-height: 100%;
margin: 0;
}
body {
min-height: 100%;
margin: 0;
}
When I have the html (or the html and body) height set to 100%,
当我将 html（或 html 和 body）高度设置为 100% 时，
html {
height: 100%;
margin: 0;
}
body {
min-height: 100%;
margin: 0;
}
回答by htrufan
I had to apply 100% to both html and body.
我必须对 html 和 body 都应用 100%。
回答by Mike Wright
Try using viewport (vh, vm) units of measure at the body level
尝试在身体级别使用视口 (vh, vm) 度量单位
html, body { margin: 0; padding: 0; } body { min-height: 100vh; }
html, body { 边距：0; 填充：0；}身体{最小高度：100vh；}
Use vh units for horizontal margins, paddings, and borders on the body and subtract them from the min-height value.
将 vh 单位用于身体上的水平边距、填充和边框，并从 min-height 值中减去它们。
I've had bizarre results using vh,vm units on elements within the body, especially when re-sizing.
我在 body 内的元素上使用 vh,vm 单位得到了奇怪的结果，尤其是在重新调整大小时。
回答by Martin Wantke
I think the largely correct way, is to set css to this:
我认为基本正确的方法是将 css 设置为：
html
{
overflow: hidden;
}
body
{
margin: 0;
box-sizing: border-box;
}
html, body
{
height: 100%;
}
回答by dinika saxena
I tried all the solutions above and I'm not discrediting any of them, but in my case, they didn't work.
我尝试了上述所有解决方案，我并没有诋毁其中任何一个，但就我而言，它们没有用。
For me, the problem was caused because the <header>tag had a margin-topof 5em and the <footer>had a margin-bottom of 5em. I removed them and instead put some padding(top and bottom, respectively). I'm not sure if replacing the margin was an ideal fix to the problem, but the point is that, if the first and last elements in your <body>has some margins, you might want to look into it and remove them.
对我来说，问题是因为<header>标签的 amargin-top为 5em，而<footer>margin-bottom 为 5em。我删除了它们，而是放了一些padding（分别是顶部和底部）。我不确定替换边距是否是解决问题的理想方法，但关键是，如果您的第一个和最后一个元素<body>有一些边距，您可能需要查看并删除它们。
My htmland bodytags had the following styles
我的html和body标签有以下样式
body {
line-height: 1;
min-height: 100%;
position: relative; }
html {
min-height: 100%;
background-color: #3c3c3c; }
回答by Vrokipal
If you havea border or padding, then the solution
html, body {
margin: 0;
height: 100%;
}
body {
border: solid red 5px;
border-radius: 2em;
}produces the imperfect rendering
产生不完美的渲染
To get it right in the presence of a border or padding
在有边框或填充的情况下正确使用
use instead
改用
html, body {
margin: 0;
height: 100%;
}
body {
box-sizing: border-box;
border: solid red 5px;
border-radius: 2em;
}as Martinpointed out, although overflow: hiddenis not needed.
正如马丁指出的那样，虽然overflow: hidden不需要。
(2018 - tested with Chrome 69 and IE 11)
（2018 - 使用 Chrome 69 和 IE 11 测试）
回答by GigiProve
This works for me:
这对我有用：
<!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>
