使主体具有浏览器高度的100％

844

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

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

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

html  css  height 
— 热体
source
2
— Josh Crozier

Answers:

1089

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

html, 
body {
    height: 100%;
}

Body向其父级（HTML）寻求如何缩放动态属性，因此HTML元素也需要设置其高度。

但是，身体的内容可能需要动态更改。将最小高度设置为100％将实现此目标。

html {
  height: 100%;
}
body {
  min-height: 100%;
}
— BentOnCoding
source
6
谢谢，这似乎删除了短页面上的白条，但是现在在高度超过浏览器窗口高度的页面上，我在底部得到了20px的白条：|
— bodyofheat 2011年
48
好的，我发现了！如果我添加html，body {min-height：100％;}，它就可以工作：D
— bodyofheat 2011年
12
注意：如果使用body {min-height}版本，则不能使用.body-child{height: 100%}把戏。
— Salman A
14
最好的答案是CSS3，使用vh-> body { height: 100vh }-在此处检查答案stackoverflow.com/a/25829844/2680216
— Adriano Resende 2015年
2
@bFunc我有这个Chrome问题。html {height：100％;}正文{height：auto}可以完成这项工作。
— GBMan
217

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

5.1.2。视口百分比长度：“ vw”，“ vh”，“ vmin”，“ vmax”单位

视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，将对其进行相应缩放。

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

这里的例子

body {
  height: 100vh;
  padding: 0;
}

body {
  min-height: 100vh;
  padding: 0;
}

大多数现代浏览器都支持此功能- 可以在此处找到支持。

— 乔什·克罗泽（Josh Crozier）
source
4
除了简单的事实外，我们采用新的做法也很不错。
— Pan Wangperawong 2015年
3
@niaster我绝对同意。自从我也发布了这个答案以来，浏览器支持已经得到改善：)
— Josh Crozier 2015年
1
@incarnate是的..太糟糕了，它不是:)好像上一次OP联机是在11/11/11（提出问题的日期..），所以我怀疑这种情况是否会改变。
— Josh Crozier
18
不知道为什么旧的方法行之有效，为什么我们需要开始“采用新的方法”。这样做没有任何好处：代码不会更小，性能也不会更好，并且仍然有不支持vw / vh的浏览器。
— cimmanon 2015年
3
Chrome用户代理样式表默认情况下会在正文中添加8px的边距（不确定其他浏览器），因此，我还必须添加margin: 0;边框以避免在右侧出现持久的垂直滚动条。
— 安迪·拉达兹
121

如果您有背景图片，则需要设置该图片：

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

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

请记住，如果您必须支持IE6，则需要找到一种方法以适应height:100%身体，无论如何IE6都height一样min-height。

— 愤怒的丹
source
当身体下方有一个全局flexbox时，也可以使用（body>＃flexbox-wrapper）
— justnorris 2013年
2
这是正确的答案，因为随着内容的长度超过单个屏幕，可接受的答案不会增加。
— SimplGy 2013年
非常感谢，愤怒的丹，我网站底部的丑陋空白消失了！
— 鲍里斯·伯科夫
当然，由于提出了这个问题，基于视口的尺寸就成了一件大事。所以现在您可以做body{min-height: 100vh}
— 愤怒的丹
您还需要body { height: auto; }滚动条不显示在FireFox中。除此之外，效果很好。
— 2013年
82

如果要在正文上保留边距并且不希望使用滚动条，请使用以下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上的演示，输出。

— 丹尼尔·帕特鲁（Daniel Patru）
source
7
谢谢你的唯一的工作答案:)我认为“绝对”使工作
— 梅德Matveev
谢谢，在没有滚动条的Firefox中对我来说效果很好。接受的答案不是。
— 安德鲁（Andrew）
@Andrew奇怪的是，这在FireFox中提供了滚动条。但是你需要接受的答案是什么height: auto;了在body条款以及用于滚动条到现在弹出。
— 2013年
@Torxed我也仍然在FireFox中获得滚动条。将自动设置添加到高度似乎不适用于我:(
— Travis Crum，2016年
在Chrome 56.0.2924.87（64位）中，这对我不起作用。
— 瑞安
30 
html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}
— 鲶鱼
source
24

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

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％的宽度时，似乎不会发生这种情况。

— 拥有
source
3
我尝试了此页面上所有受好评的答案，但没有一个起作用。这一个！
— 瑞安
这个答案应该是公认的。这height: 100vh也不是解决方案。将顶部容器设置得很100vh高，100vw如果容器具有滚动条，则可能会导致问题-它将超出其应有的大小（并且可能会导致不必要地显示滚动条）。这height: 100vh也给我们在较新的Android设备（例如，装有Android 9的Xiaomi Mi 9）上造成了问题，在该设备上容器将比屏幕本身大，并使文档主体不必要的垂直滚动条。
— jtompl
21

实际上，在我使用的每个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元素不会因为浏览器的默认设置而自动向下或向右推送其中的所有内容。

将width和height变量设置为100％，以确保浏览器不会因为预期实际具有自动设置边距或填充而调整它们的大小，并且设置了min和max以防万一发生一些奇怪的无法解释的事情，尽管您可能不需要它们。

该解决方案也意味着，像我一样，当我第一次开始对HTML和CSS几年前，你会不会给你的第<div>一个margin:-8px;以使其适合在浏览器窗口的角落。

在发布之前，我查看了我的另一个全屏CSS项目，发现在那里使用的东西只是body{margin:0;}一无是处，在我从事该项目的两年中，它一直运行良好。

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

— MineAndCraft12
source
您能否解释一下，width: 100%body和html元素的可能目的是什么？是的，我知道，从实际的角度来看，body { margin: 0; }在大多数情况下就足够了。我只是想更全面地了解。
— 约翰cj
21

快速更新

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

当今CSS的更好解决方案

html, body{ 
  min-height: 100vh;
  overflow: auto;
}
— 杰安特·瓦什尼（Jayant Varshney）
source
2
这与现有答案有何不同？
— cimmanon 2015年
3
我也尝试过其他人，但对我没有用。此方法有效，因此可以解决有需要的人。@cimmanon
— Jayant Varshney，
我不得不说，除了其他高票答案外，这对我来说是行之有效的。overflow: auto在这里做魔术。顺便说一句，我使用Chrome。
— SkuraZZ
唯一的选项（我发现）允许溢出内容以调整高度。
— 丹尼尔·夏普
6

这里：

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}
— 埃迪
source
4

您还可以根据需要使用JS

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

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}
— 草药
source
但是为此，您需要添加比jQuery库和用JavaScript编写的东西更多的东西，而这可以在CSS中完成。
— 前端开发人员
3

尝试

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
— ak-SE
source
2
您能否解释一下，width: 100%body和html元素的可能目的是什么？是的，我知道，从实际的角度来看，body { margin: 0; }在大多数情况下就足够了。我只是想更全面地了解。
— 约翰cj
3

请检查以下内容：

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

或尝试新方法视口高度：

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

视口：如果您使用的视口意味着屏幕的任何大小的屏幕内容都会全屏显示。

— Ayyappan K
source
请附上您的解决方案说明，以便其他人找到该答案。谢谢！
— 肖恩
您能否解释一下，width: 100%body和html元素的可能目的是什么？
— 约翰cj
因此，可以说我有一个表，该表具有50列和1000行，其数字在1000到9999之间，它们将发生什么情况，它们将像通常一样滚动到窗口之外，或者它们具有溢出类型的滚动条
— PirateApp
3

如果您不想自己编辑CSS文件并自己定义高度规则，最典型的CSS框架也可以通过将body元素填充到整个页面来解决此问题，其中包括轻松解决多个问题视口的大小。

例如，Tacit CSS框架立即解决了这个问题，您无需定义任何CSS规则和类，而只需在HTML中包含CSS文件即可。

— 菲利普·弗莱雷
source
2 
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 +。适用于背景图像和渐变。滚动条可根据需要提供。

— 科尼
source
2

我会用这个 

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当调整屏幕（到例如移动的大小）扩大其高度是必要的

— medBouzid
source
1

所有答案都是100％正确并且得到了很好的解释，但是我做得很好并且非常简单，以使其具有响应能力。

在这里，元素将占据视口高度的100％，但在移动视图中，它在纵向视图（mobile）上看起来并不是特别好，因此，当视口变小时，该元素将折叠并彼此重叠。因此，使响应速度变慢的是代码。希望有人能从中获得帮助。

<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演示。

— wasimv09
source
0

这里更新

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}
— Anburaj_N
source
-1

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

— 公鸡
source
6
我不建议使用overflow：hidden，除非您有充分的理由。找出原因，然后进行调整，使其不会溢出
— jontro 2015年
-1 
@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }
— 想象破碎者
source
您能否解释一下，width: 100%body和html元素的可能目的是什么？是的，我知道，从实际的角度来看，body { margin: 0; }在大多数情况下就足够了。我只是想更全面地了解。
— 约翰cj
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.