Question

我想让身体拥有100％的浏览器高度。我可以使用CSS吗？

我尝试设置height: 100%，但它不起作用。

我想为页面设置背景颜色以填充整个浏览器窗口，但如果页面内容很少，我会在底部看到一个丑陋的白条。

Answer 1

尝试将html元素的高度设置为100％。

html, 
body {
    height: 100%;
}

Body查看其父级（HTML）以了解如何扩展动态属性，因此HTML元素也需要设置它的高度。

然而，身体的内容可能需要动态改变。将min-height设置为100％将实现此目标。

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

Answer 2

作为将html和body元素的高度设置为100%的替代方法，您还可以使用视口百分比长度。

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

在这种情况下，您可以使用值100vh - 这是视口的高度。

Example Here

body {
    height: 100vh;
}

body {
    min-height: 100vh;
}

大多数现代浏览器都支持此功能 - support can be found here。

Answer 3

如果你有背景图片，那么你需要设置它：

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

这可确保当内容高于视口时允许您的body标签继续增长，并且当您开始向下滚动时，背景图像会继续重复/滚动/滚动。

请记住，如果你必须支持IE6，你需要找到一种方法来楔入height:100%身体，IE6无论如何都会像height一样对待min-height。

Answer 4

如果你想保留身体上的边距而不想要滚动条，请使用以下css：

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

设置 body {min-height:100%} 将为您提供滚动条。

请参阅http://jsbin.com/aCaDahEK/2/edit?html,output上的演示。

Answer 5

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

Answer 6

我在字面上使用的每个CSS文件的用法如下：

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

边距为0可确保浏览器不会自动定位HTML和BODY元素，使其左侧或右侧有一些空格。

填充0确保HTML和BODY元素不会因浏览器默认值而自动向下或向右推送其中的所有内容。

宽度和高度变量设置为100％，以确保浏览器不会在预期实际具有自动设置边距或填充的情况下调整它们的大小，并设置最小值和最大值以防万一有些奇怪，无法解释事情发生了，虽然你可能不需要它们。

这个解决方案也意味着，就像几年前我第一次开始使用HTML和CSS时所做的那样，你不必让你的第一个<div> margin:-8px;让它适合在浏览器窗口的一角。

在我发布之前，我查看了我的另一个全屏CSS项目，发现我在那里使用的所有内容只有body{margin:0;}而没有别的，这两年来我一直在努力工作

希望这个详细的答案有所帮助，我感到痛苦。在我看来，浏览器应该在左侧，有时在body / html元素的顶部设置一个不可见的边界，这是愚蠢的。

Answer 7

在测试各种场景后，我相信这是最好的解决方案：

html {
    width:100%;
    height: 100%;
    display: table;
}

body {
    width:100%;
    display:table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}

动态的是，如果内容溢出，html和body元素将自动扩展。我在最新版本的Firefox，Chrome和IE 11中对此进行了测试。

在这里看到完整的小提琴（因为你在桌子上讨厌，你可以随时改变它以使用div）：

https://jsfiddle.net/71yp4rh1/9/

话虽如此，这里发布的答案还有几个问题。

html, body {
    height: 100%;
}

使用上面的CSS会导致html和body元素在其内容溢出时不会自动展开，如下所示：

https://jsfiddle.net/9vyy620m/4/

滚动时，请注意重复的背景？发生这种情况是因为由于子表溢出，body元素的高度没有增加。为什么它不像任何其他块元素那样扩展？我不确定。我认为浏览器处理错误。

html {
    height: 100%;
}

body {
    min-height: 100%;
}

如上图所示，在身体上设置100％的最小高度会导致其他问题。如果执行此操作，则无法指定子div或表占用百分比高度，如下所示：

https://jsfiddle.net/aq74v2v7/4/

希望这有助于某人。我认为浏览器处理错误。如果它的孩子溢出，我希望身体的高度自动调整变大。但是，当您使用100％高度和100％宽度时，似乎不会发生这种情况。

Answer 8

快速更新

html, body{
    min-height:100%;
    overflow:auto;
}

使用今天的CSS更好的解决方案

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

Answer 9

下面：

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

Answer 10

如果需要，您也可以使用JS

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

Answer 11

请检查：

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

或尝试新方法视口高度：

html, body { width: 100vw; height: 100vh;}

视口：如果您使用视口意味着任何大小的屏幕内容将在屏幕上达到全高。

Answer 12

尝试

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

Answer 13

尝试添加：

body {
height: 100vh;
}

Answer 14

如果您不想编辑自己的CSS文件并自己定义高度规则，最典型的CSS框架也解决了这个问题，其中body元素填充了整个页面，以及其他问题，轻松使用多种视口。

例如，Tacit CSS框架解决了这个问题，你不需要定义任何CSS规则和类，只需在HTML中包含CSS文件。

Answer 15

只有1行CSS ...你可以完成这件事。

body{ height: 100vh; }

Answer 16

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

适用于所有主流浏览器：FF，Chrome，Opera，IE9 +。适用于背景图像和渐变。滚动条可根据内容需求提供。

Answer 17

所有答案都是100％正确并得到充分解释，但是我做了一些好的，非常简单的事情让它变得敏感。

这里的元素将占据视口的100％高度，但是当涉及移动视图时，它在纵向视图（移动）上看起来不太好看，所以当视口变小时，元素将会折叠和重叠在彼此身上。所以这里的代码响应很少。希望有人能从中获得帮助。

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

这里是JSfiddle Demo.

Answer 18

这里有一些很好的答案，但也有一些误解。在为网页中的尺寸设置样式时，我支持现代浏览器的以下设置：

html {
    height: 100%; /* fallback for IE and older browsers */
    height: 100vh;
}

body {
    height: auto; /* required to allow content to expand vertically without overflow */
    width: auto;
    min-height: 100%; /* fallback for IE and older browsers */
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

对于初学者来说，新的视口单位（“vh”）是多余的，只要您将 html 的高度设置为 100% 就不是必需的。原因是 body 从 html 父级派生其值。您仍然可以在 body 中使用“vh”单位来绕过父级并直接从视口获取其属性尺寸。但如果 html 的高度为 100%，则它是可选的。

请注意，我已将 body 设置为 height:auto。 您不希望将 body height 和 width 设置为 100% 或特定值，因为这会将内容限制为视口的尺寸，并且溢出。 height:auto 是您在 CSS 中最好的朋友！如果您在 overflow:auto 上设置 height:auto，则不需要使用 body 属性。这告诉页面让内容将高度扩展到任何必要的尺寸，如果需要，甚至超出视口的高度。它不会突破 body 维度。它确实允许根据需要滚动。 auto 还允许您有边距并仍然支持使用 min-height 填充视口的页面。无论如何，我相信 height:auto 是大多数 UA 浏览器样式表中正文的默认值。

添加 min-height:100% 然后为您提供您希望 body 具有的默认高度，然后允许页面尺寸填充视口而不会使内容脱离正文。这只是因为 html 基于视口派生了它的 height:100%。

此处的两个关键部分不是单位，如 % 或 vh，而是确保根元素或 html 设置为视口高度的 100%。其次，身体有一个 min-height:100% 或 min-height:100vh 很重要，所以它开始填充视口高度，无论它可能是什么。除此之外不需要其他任何东西。请注意，我为 min-height 添加了“回退”属性，因为 2010 年后的许多浏览器不支持“vh”单位。假装网络世界中的每个人都使用最新最好的浏览器很有趣，但现实是许多旧版浏览器今天仍然存在，在大型企业网络中仍然使用过时的浏览器，无法理解这些新单元。

传统浏览器的样式高度

我们忘记的一件事是许多非常旧的浏览器不知道如何正确填充视口高度。遗憾的是，那些旧版浏览器只需要在 height:100% 元素和 html 上都有 body。如果你不这样做，浏览器背景颜色和其他奇怪的视觉效果会在没有填充视口的内容下流动。我们通过仅向较旧的用户代理提供这些 100% 值来解决这个问题。如果您在旧版浏览器上进行测试，请记住这一点。

html  {
    height:100%;
}

body {
    height:100%;
    width:auto;
    margin:0;
    padding:0;
}

Answer 19

此处更新

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}

Answer 20

我会用这个

html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }

<html>
    <body>
    </body>
</html>

浏览器将使用min-height: 100vh，如果某种程度上浏览器较旧，则min-height: 100%将成为备用。

overflow: auto是必需的，如果您希望在调整屏幕大小时将正文和html的高度扩大（例如，移动大小）

Answer 21

我为 div 容器设置样式 - 通常是具有以下 css 的 body 的唯一子元素

.body-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

Answer 22

@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }

Answer 23

关于底部的额外空间：您的页面是ASP.NET应用程序吗？如果是这样，你的标记中几乎可能包含所有内容。不要忘记为表单设置样式。将overflow:hidden;添加到表单可能会删除底部的额外空格。

Answer 24

CSS3有一种新方法。

 height:100vh

它使ViewPort 100％等于高度。

所以你的代码应该是

 body{
 height:100vh; 
 }

使身体拥有100％的浏览器高度

24 个答案: