使<body>充满整个屏幕？

129

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

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

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

html css radial-gradients

— Ry-
source

2

而且body { width: 100%; height: 100%; }行不通吗？

— 亚历克斯（Alex）

那个css应用于body标签，对吗？最新的Chrome jsfiddle.net/kdjFD/embedded/result对我来说非常有用。您正在测试哪种浏览器？

— LeRoy

4

不，body { width: 100%; height: 100%; }不行。我想我也必须应用它<html>。

— Ry-

不要使用旧的-webkit-语法。使用官方的W3C语法

— Tim Nguyen 2014年

@TimNguyen：这个问题是三年前问的，当时没有浏览器支持。

— Ry-

201

html, body {
    margin: 0;
    height: 100%;
}

— 卡德拉贡
source

18

看来，html { height: 100%; }实际上只需要这样做。

— Ry-

30

对我来说，这html { height: 100%; }也不body { height: 100%; }是足够的（作为测试包括Opera），最有效的方法是html, body { min-height: 100%; }使用高度而不是最小高度，使我的背景变成白色，而没有在页面中间扩展一些可折叠div时应用的背景色。min-height解决这个问题。

— 斯蒂芬·P

1

为什么仅在使用背景时才会发生此问题：线性渐变而不是在简单背景下发生

— ASEN 2015年

@ASEN您是否曾经知道为什么？

— 蕾丝

2

如果仍然无法使用，请更改100%为100vh。

— PolymorphismPrince

27

在我们的网站上，我们有静态内容的页面以及使用AJAX加载内容的页面。在一页（搜索页）上，有时AJAX结果会超出整个页面的范围，有时甚至不返回结果。为了使背景图片在所有情况下都能填充页面，我们必须应用以下CSS：

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

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

height为html和min-height为body。

— 1980年代
source

1

他们俩都不需要width: 100%;。

— Ry-

1

由于展示：块性质

— Valen 2015年

也margin: 0;足够，无需指定您使用哪个单位的零

— KameeCoding

15

由于没有其他答案对我有用，因此我决定将其发布为其他寻求解决方案的人的答案，这些解决方案也发现了相同的问题。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和body）的高度设置为100％时，

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

背景无法填充身体

— 社区
source

12

我必须将100％应用于html和body。

— 特鲁凡
source

4

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

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

对身体上的水平边距，填充和边框使用vh单位，并从最小高度值中减去它们。

我在体内的元素上使用vh，vm单位时产生了奇怪的结果，尤其是在调整大小时。

— 迈克·赖特
source

1

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

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}

— 马丁·万特克
source

抱歉，其中的重要部分与六年前接受的答案相同。

— Ry-

1

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

对我来说，问题是由于<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; }

— 迪尼卡·萨克森纳
source

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测试）

— Vrokipal
source

您的答案仅与您相关，并且因为您在body标签上添加了边框。如果没有该边框，则body将会恰好填充视口的100％，例如，您可以看到带有背景色的视口。这个问题在7年前被接受的正确答案仍然有效。

— 尼斯（Niss），

-1

这对我有用：

<!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>

— 吉吉·普罗夫
source

没问题，对不起。很高兴您找到了对您有用的东西。

— Ry-