使 < 身体 > 填满整个屏幕？

我在我的网页上使用径向渐变作为背景，像这样:

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

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

325501 次浏览
小开
最佳答案 
html, body {
margin: 0;
height: 100%;
}
小开

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

小开

在我们的网站，我们有网页的内容是静态的，并在网页，它是加载与 AJAX。在一个页面(一个搜索页面)上，有些情况下 AJAX 结果会超过该页面的容量，有些情况下它不会返回任何结果。为了让背景图片在所有情况下填充页面，我们必须应用以下 CSS:

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


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

height代表 html min-height代表 body。

小开

由于没有其他的答案对我有用，我决定把这个作为其他人寻找同样问题的解决方案的答案。Html 和 body 都需要用 min-height设置，否则渐变不会填充 body 高度。

我发现 斯蒂芬 · P 的 评论提供了正确的答案。

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 和 body)高度设置为100% 时,

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

background not filling body

小开

尝试在主体级使用 viewport (vh，vm)度量单位

Html，主体{边距: 0; 空白: 0; } 身体{最小高度: 100vh; }

使用 vh 单位表示主体上的水平边距、填充和边框，并从 min-height 值中减去它们。

我曾经在主体中的元素上使用 vh，vm 单位得到过奇怪的结果，特别是在重新调整大小时。

小开

我认为最正确的方法是把 css 设置为:

html
{
overflow: hidden;
}


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


html, body
{
height: 100%;
}
小开

我尝试了以上所有的解决方案，我并不怀疑其中任何一个，但在我的情况下，他们没有工作。

对我来说，问题是因为 <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; }
小开

如果你 有一个边框或填充，那么 解决方案

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

正如 马丁指出的，虽然 overflow: hidden是不需要的。

(2018年测试 Chrome 69和 IE 11)

小开

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

如果您不希望您的内容占用超过屏幕的高度，或者您计划使内部可滚动元素，设置

body {
height: 100vh;
}

否则，当屏幕容纳的内容超过可以容纳的内容时，您希望 < body > 变成可滚动的，因此设置

body {
min-height: 100vh;
}

只有这样才能达到目标，尽管可能会有一些可取的改进。

删除 < body > 的边缘。

body {
margin: 0;
}

这样做有两个主要原因。

  1. < body > 到达窗口的边缘。
  2. < body > 从一开始就没有滚动条了。

另外，如果你希望背景是放射状渐变，中心在屏幕的中心，而不是像你的例子那样在右下角，可以考虑使用 

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>


提交答案