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

小开

最佳答案

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

html,body {height: 100%;}

Body向其父级（超文本标记语言）寻求如何缩放动态属性，因此超文本标记语言元素也需要设置其高度。

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

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

小开

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

小开

这里：

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

小开

如果你有一个背景图像，那么你会想要设置这个：

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

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

请记住，如果您必须支持IE6，您将需要找到一种方法来楔形height:100%的身体，IE6对待height就像对待min-height一样。

小开

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

小开

如果您想保留正文的边距并且不想使用滚动条，请使用以下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，输出。

小开

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

5.1.2。视口百分比长度：'vw'、'vh'、'vmin'、'vmax'单位
视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

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

这里的例子

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

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

大多数现代浏览器都支持这一点-支持可以在这里找到。

小开

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+。适用于背景图像和渐变。滚动条可根据内容需求提供。

小开

CSS3有了新的方法。

 height:100vh

它使ViewPort 100%等于高度。

所以你的代码应该是

 body{height:100vh;}

小开

快速更新

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

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

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

小开

我在我使用的每个CSS文件的开头使用的是以下内容：

html, body{margin: 0;
padding: 0;
min-width: 100%;width: 100%;max-width: 100%;
min-height: 100%;height: 100%;max-height: 100%;}

边距为0可确保超文本标记语言和BODY元素不会被浏览器自动定位为在它们的左侧或右侧有一些空间。

0的填充确保超文本标记语言和BODY元素不会因为浏览器默认值而自动向下或向右推送它们内部的所有内容。

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

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

在我发布之前，我看了我的另一个全屏CSS项目，发现我在那里使用的只是body{margin:0;}，没有其他东西，这在我工作的2年里工作得很好。

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

小开

试试看

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

小开

只有一行CSS…你可以做到这一点。

body{ height: 100vh; }

小开

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

html {width: 100%;height: 100%;display: table;}
body {width: 100%;display: table-cell;}
html, body {margin: 0;padding: 0;}

它是动态的，因为如果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%宽度时，这似乎不会发生。

小开

请检查这个：

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

或者尝试新方法视口高度：

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

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

小开

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

var winHeight = window.innerHeight    ||document.documentElement.clientHeight ||document.body.clientHeight;
var pageHeight = $('body').height();if (pageHeight < winHeight) {$('.main-content,').css('min-height',winHeight)}

小开

所有答案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演示。

小开

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

例如，默契 CSS框架解决了这个问题，您不需要定义任何CSS规则和类，只需将CSS文件包含在超文本标记语言中。

小开

这里更新

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

小开

我会用这个

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%将是后备。

如果您想在调整屏幕大小（例如移动大小）时主体和html扩展其高度，则需要overflow: auto

小开

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

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

小开

适用于现代和传统浏览器的CSS高度

这里发布的大多数其他解决方案都不会在传统浏览器中运行良好！并且人们发布的一些代码会在现代浏览器中导致文本流过背景颜色的超过100%高度的文本严重溢出，这是糟糕的设计！所以请尝试我的代码解决方案。

下面的CSS代码应该在所有已知的浏览器中正确支持灵活的网页高度设置，过去和现在：

html {height: 100%; /* Fallback CSS for IE 4-6 and older browsers. Note: Without this setting, body below cannot achieve 100% height. */height: 100vh;/* Overrides 100% height in modern HTML5 browsers and uses the viewport's height. Only works in modern HTML5 browsers */}
body {height: auto; /* Allows content to grow beyond the page without overflow */width: auto; /* Allows content to grow beyond the page without overflow */min-height: 100%; /* Starts web page with 100% height. Fallback for IE 4-6 and older browsers */min-height: 100vh;/* Starts web page with 100% height. Uses the viewport's height. Only works in modern HTML5 browsers */overflow-y: scroll;/* Optional: Adds an empty scrollbar to the right margin in case content grows vertically, creating a scrollbar.  Allows for better width calculations, as the browser pre-calculates width before scrollbar appears, avoiding page content shifting.*/margin: 0;padding: 0;background:yellow;/* FOR TESTING: Next add a large block of text or content to your page and make sure this background color always fills the screen as your content scrolls off the page. If so, this works. You have 100% height with flexible content! */}

上面代码的注释

在许多较旧的浏览器以及较新的浏览器中，如果您没有在<html>选择器上设置100%的高度，主体将永远无法达到100%的高度！所以这在这里至关重要。

新的视口单元（“vh”）在body选择器上是多余的，只要您将html选择器设置为100%或100vh的高度，就没有必要。原因是body总是从html父级派生其值。例外是过去的一些非常旧的浏览器，所以最好为主体设置一些高度值。

一些使用body选择器的现代浏览器将不知道如何直接继承视口高度。所以，始终将html选择器设置为100%高度！然而，在大多数现代浏览器中，您仍然可以使用body中的“vh”单元来绕过父html值并直接从视口获取其属性维度。但同样，如果父或根html选择器具有100%高度，它是可选的，body将始终正确继承。

请注意，我将body设置为height:auto，而不是height:100%。这最初会折叠内容周围的body元素，以便它可以随着内容的增长而增长。height:auto0因为这将内容限制为主体当前的height:auto1维度，而不是height:auto2维度。每当你分配bodyheight:100%时，一旦内容文本移动超过浏览器的高度，它就会溢出容器，从而溢出分配给原始视口高度的任何背景，创建丑陋的视觉效果！height:auto3

但是你仍然希望body默认为100%的高度，对吧？这就是min-height:100%创造奇迹的地方！它不仅允许你的body元素默认为100%的高度，而且即使在最古老的浏览器中也可以使用！但最重要的是，它允许你的背景100%填充，但随着高度的内容自动垂直增长，它会延伸得更远。

如果您在body上设置height:auto，则不需要使用overflow:auto属性。这会告诉页面让内容将高度扩展到任何必要的维度，甚至超出视口的高度，如果需要并且内容增长超过视口页面显示的长度。它不会突破body维度。并且它确实允许根据需要滚动。overflow-y:scroll允许您在每个Web浏览器中默认情况下在页面内容的右侧添加一个空滚动条。滚动条仅在内容延伸超过视口100%高度时才会出现在滚动条区域内。这允许您的页面宽度，以及浏览器预先计算的任何边距或填充，并在用户查看滚动页面和不滚动页面时阻止页面移动。我经常使用这个技巧，因为它为所有场景完美设置页面宽度，您的网页永远不会快速移动和加载！

我相信height:auto是大多数UA浏览器样式表中body的默认值。所以无论如何，请理解大多数浏览器默认为该值。

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

这里的两个关键部分不是单位，如%或vh，而是确保根元素或html设置为视口高度的100%。其次，主体有一个min-height:100%或min-height:100vh很重要，这样它就开始填充视口高度，不管是什么。除此之外不需要其他任何东西。

传奇浏览器的造型高度

注意，我为height和min-height添加了“后备”属性，因为2010年之前的许多浏览器不支持“vh”视口单元。假装网络世界中的每个人都使用最新最好的视口单元很有趣，但现实是，许多传统浏览器仍然存在于今天的大型企业网络中，许多仍然使用不理解这些新单元的过时浏览器。我们忘记的一件事是，许多非常古老的浏览器不知道如何正确填充视口高度。可悲的是，这些传统浏览器在html元素和body上都必须有height:100%，因为默认情况下它们都默认折叠高度。如果你不这样做，浏览器背景颜色和其他奇怪的视觉效果会在没有填满视口的内容下流动。上面的示例应该为你解决了所有这些问题，并且仍然适用于较新的浏览器。

在现代HTML5浏览器之前（2010年后），我们通过简单地在html和body选择器上设置height:100%来解决这个问题，或者在body上设置min-height:100%。因此，这两种解决方案都允许上面的代码在20多年的传统网络浏览器中工作，而不是过去几年创建的少数浏览器。在旧的Netscape 4系列或IE 4-5中，在主体选择器上使用min-height:100%而不是height:100%仍然可能导致那些非常旧的浏览器中高度崩溃，并导致文本溢出背景颜色。但这将是我在这个解决方案中看到的一个问题。

使用我的CSS解决方案，您现在可以在过去和现在的99.99%的浏览器中正确查看您的网站而不仅仅是过去几年构建的60%-80%的浏览器。

祝你好运！

小开

后来有20多个答案，似乎没有一个提到我发现的最关键的因素——标记。

在基本上尝试了这个问题和其他几个问题的每个答案之后，我将我的标记重组为如下内容：

<body><div class="section1"><nav></nav>...</div><div class="section2"></div></body>

本质上，它需要两个不同的外部容器。第一个容器用于包含导航栏和，将背景颜色/图像一直延伸到浏览器的高度，第二个容器用于包含“折叠下方”的所有内容-包括第二个背景颜色/图像。

该解决方案允许第一个容器的背景一直扩展到底部，同时保持第二个容器自由占用所需的空间。

从这一点开始，唯一需要得到我和原始问题想要的结果的CSS如下：

body {height: 100%;}
.section1 {height: 100%;background: black; /* for demo purposes */}
.section2 {background: white; /* for demo purposes */}

小开

对于真正的纯粹主义者，这个尊重浏览器的默认边距，并防止其他方法产生的不希望的滚动，除了在内容增长时增长。在Chrome，Safari和Firefox中测试。背景只是为了显示…

html {display: flex;flex-direction: column;height: 100%;background: red;}body {flex:1;background: green;}