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

Answer 2

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

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

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

对于height的{{1}}和html，

min-height。

Answer 3

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-height or the gradient would not fill the body height.

I found Stephen P's comment to 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;
}

background filling body height

When I have the html (or the html and body) height set to 100%,

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

background not filling body

Answer 4

我必须100％同时适用于HTML和身体。

Answer 5

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

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

将vh单位用于正文的水平边距，填充和边框，并从最小高度值中减去它们。

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

Answer 6

我尝试了上面所有的解决方案，但是我并没有抹黑它们，但就我而言，它们没有用。

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

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

body

Answer 7

如果您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测试）

Answer 8

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

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}

Answer 9

这对我有用：

let gncv2 = XMLMapper<GNCv2>().map(XMLString: xmlString)

Answer 10

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

如果您不希望内容占据屏幕上方的高度，或者计划制作一个内部可滚动元素，请设置

body {
  height: 100vh;
}

否则，您希望在内容超出屏幕可容纳范围时变为可滚动状态，因此进行设置

body {
  min-height: 100vh;
}

仅此一项就可以实现目标，尽管可以并可能进行改进。

删除的边距。

body {
  margin: 0;
}

这样做的主要原因有两个。

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

P.S。如果您希望背景为放射状渐变，并且其中心位于屏幕中心而不是右下角（如您的示例所示），请考虑使用类似

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>

填满整个屏幕？

10 个答案: