149

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

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

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

4

9 回答 9

242 
html, body {
    margin: 0;
    height: 100%;
}
于 2011-04-19T20:13:45.463 回答
33

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

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

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

height对于html和min-height对于body。

于 2013-06-13T18:58:08.170 回答
20

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

我发现Stephen P 的 评论可以提供正确的答案。

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

背景不填充主体

于 2015-05-24T21:18:31.297 回答
12

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

于 2011-11-24T12:53:47.823 回答
4

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

html，正文 { 边距：0；填充：0；} 身体 { 最小高度：100vh; }

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

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

于 2016-07-25T18:11:31.220 回答
3

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

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}
于 2017-12-25T23:52:19.587 回答
3

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

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

body {
  height: 100vh;
}

否则，您希望 <body> 在内容多于屏幕容纳不下时变为可滚动状态，因此请设置

body {
  min-height: 100vh;
}

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

删除 <body> 的边距。

body {
  margin: 0;
}

这样做有两个主要原因。

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

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

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>

于 2020-10-20T14:29:41.320 回答
1

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

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

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

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

html {
  min-height: 100%;
  background-color: #3c3c3c; }
于 2018-10-17T08:45:43.007 回答
1

如果您有边框或填充，那么解决方案

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

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

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

于 2018-10-22T14:23:39.967 回答