使网页主体高度占据浏览器窗口的100%。

Question

使网页主体高度占据浏览器窗口的100%。

htmlcssheight

1093

我想让 body 占据整个浏览器高度，是否可以使用 CSS 实现？

我尝试设置 height: 100%，但没有效果。

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

- bodyofheat

5

CSS3 视口百分比长度单位是相对于视口尺寸而非父元素的长度单位，适用于设计响应式网站。其中最常见的单位是vw（视口宽度的百分数）和vh（视口高度的百分数）。例如，1vw 等于视口宽度的1%。这些单位还可以与min- 和max- 前缀一起使用以设置相对的最小和最大值。 - Josh Crozier

25个回答

284

作为将 html 和 body 元素的高度设置为 100% 的替代方案，您还可以使用视口百分比长度单位。5.1.2. 视口百分比长度：'vw'、'vh'、'vmin'、'vmax' 单位。视口百分比长度是相对于初始包含块的大小而言的，当初始包含块的高度或宽度更改时，它们会相应地进行缩放。在此示例中，您可以使用值为 100vh 的单位——它等于视口的高度。在此查看示例。

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

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

这在大多数现代浏览器中都得到了支持 - 这里可以找到支持情况。

- Josh Crozier

5

除了这个很容易理解的事实之外，采用新的做法也是一个好事情。 - Pan Wangperawong

3

我完全同意。自从我发表这个回答以来，浏览器的支持已经得到了改善 :) - Josh Crozier

23

为什么我们需要开始“采用新的做法”，当旧的做法已经很好了呢？这样做并没有任何优势：代码大小没有缩小，性能也没有提高，而且仍有一些浏览器不支持vw/vh。 - cimmanon

10

Chrome用户代理样式表默认会给body添加8像素的边距（不确定其他浏览器是否也是如此），因此我还必须添加 margin: 0; 才能避免右侧出现持续的垂直滚动条。 - Andy Raddatz

10

这个解决方案在移动端（Chrome，Android）会导致额外的滚动，因为它计算视口高度时没有考虑工具栏。 - int_index

显示剩余8条评论

138

如果你有一张背景图片，那么你会想要设置它而不是原来的背景颜色：

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

这样可以确保当内容高度超出视口时，body标签可以继续增长，并且在向下滚动时背景图像可以继续重复/滚动/其他。

请记住，如果您需要支持IE6，您需要找到一种方法来插入height:100%以适应body，因为IE6会将height视为min-height。

- Angry Dan

还适用于在 body 下方存在全局 flexbox 的情况（body > #flexbox-wrapper）。 - pyronaur

4

这是正确的答案，因为当内容超过一个屏幕时，被接受的答案将不会再增加。 - SimplGy

当然，自从这个问题被提出来以后，基于视口的尺寸就成为了一种事物。所以现在你可以只需使用 body{min-height: 100vh} 就可以了。 - Angry Dan

除此之外，您还需要在Firefox中使用body { height: auto; }来隐藏滚动条。除此之外，一切完美。 - Torxed

这在我的Chrome 56.0.2924.87 (64位)上不起作用。 - Ryan

显示剩余2条评论

90

如果你想保留页面主体的边距并且不想出现滚动条，可以使用以下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。

- Daniel Patru

10

谢谢您提供了唯一可行的答案 :) 我认为“绝对值”让它起作用。 - Dmitry Matveev

1

在Firefox中对我很有效，没有滚动条，谢谢。而被接受的答案则不行。 - Andrew

很奇怪，这会在FireFox中出现滚动条。然而，你需要在body子句中加入height: auto;才能让滚动条弹出，以符合接受的答案。 - Torxed

@Torxed，我在FireFox中仍然会出现滚动条。对高度添加自动设置似乎对我没有用 :( - Travis Crum

这在我的Chrome 56.0.2924.87 (64位)上没有起作用。 - Ryan

显示剩余2条评论

71

经过测试不同的情况，我认为这是最好的解决方案：

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中测试过。

在这里查看完整的 fiddle（对于那些讨厌表格的人，您可以随时将其更改为使用 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%;
}

在body上设置min-height为100%会引起其他问题。如果这样做，你就不能像这个示例https://jsfiddle.net/aq74v2v7/4/那样指定子div或表的百分比高度。

希望这可以帮助某些人。我认为浏览器处理这个不正确。我希望body的高度能够自动调整，如果它的子元素溢出的话，它也会变得越来越大。然而，当你使用100％高度和100％宽度时，似乎并没有发生这种情况。

- OwN

7

我尝试了这个页面上所有得票最高的答案，但都没有起作用。这一个起作用了！ - Ryan

5

这个答案应该被采纳。height: 100vh也不是解决方案。如果将顶部容器设置为100vh高和100vw宽，如果容器有滚动条，则可能会导致容器比应该更大（并可能导致滚动条不必要地可见）。在新的Android设备上（例如Android 9的小米Mi 9），height：100vh也会给我们带来问题，容器会比屏幕本身更大，并且会使文档主体出现不必要的垂直滚动条。 - jtompl

1

我认为body min-height及其子元素高度问题的原因是你无法计算动态属性的百分比值作为min-height。因为min-height是动态而不是静态的。 - Čamo

两个小时后，这是唯一对我有效的解决方案。谢谢！ - Matteo

1

太棒了。我也尝试了所有的常见答案，但由于内容远大于实际大小，它们都没有起到帮助作用。 - T. Jony

显示剩余2条评论

34

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

- Catfish

30

使用现代CSS的更好解决方案

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

- Jayant Varshney

2

这个提供的内容与现有答案有何不同之处？ - cimmanon

4

我也试过其他的方法，但对我来说都没有起作用。这个方法有效，因此它可以成为有需要的人的解决方案。@cimmanon - Jayant Varshney

1

我必须说，这个答案对我来说比其他高票答案更有效。在这里使用overflow: auto就可以实现魔法。顺便说一下，我使用的是Chrome浏览器。 - Lying_cat

我找到的唯一选项，允许内容溢出并调整高度。 - Daniel Sharp

如果您正在使用浮点数，那么这是完美的答案。 - Fathy

22

我在每个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填充确保浏览器不会因为默认设置而自动将它们内部的所有内容向下或向右推。

宽度和高度变量设置为100％，以确保浏览器不会因为自动设置边距或填充而调整它们的大小。最小和最大设置只是为了防止出现奇怪的不可解释的问题，但你可能并不需要它们。

这种解决方案还意味着，就像我几年前刚开始学习HTML和CSS时所做的那样，您无需给第一个

设置margin:-8px;来使其适合浏览器窗口的角落。

发布之前，我查看了我的另一个全屏CSS项目，并发现我在那里使用的仅是body{margin:0;}，没有其他任何东西，这已经在我工作了2年的时间里运行良好。

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

- MineAndCraft12

请问，width: 100% 对于 body 和 html 元素的可能目的是什么？是的，我明白从实际角度来看，在大多数情况下 body { margin: 0; } 应该已经足够了。我只是想更深入地了解。 - john c. j.

8

在现代和旧版浏览器中都有效的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％的高度，body将永远无法实现100％的高度！因此这非常关键。

新的视口单位（“vh”）对于body选择器来说是冗余的，只要您已将html选择器设置为100％或100vh。原因是总是从父级html派生其值。但除了一些非常古老的浏览器之外，最好为body设置一些高度值。

一些使用body选择器的现代浏览器将不知道如何直接继承视口高度，所以始终将html选择器设置为100％高度！您仍然可以在body中使用"vh"单位，以绕过父级html值，并直接从大多数现代浏览器的视口获取其属性尺寸，但如果父级或根html选择器具有100％高度，则再次是可选的，因为body始终会正确继承。

请注意，我将body设置为height:auto而不是height:100％。这会使元素最初围绕内容崩溃，以便随着内容的增长而增长。您不想将body的height和width设置为100%或特定值，因为这将限制内容到当前的可视尺寸，而不是其可滚动尺寸。每当您分配body height:100％时，只要内容文本超出浏览器的高度，它就会溢出容器，从而创建一个丑陋的视觉效果！height:auto是CSS中您最好的朋友！

但是，您仍然希望默认为100％的高度，对吗？这就是min-height:100%的神奇之处！它不仅允许您的元素默认为100％的高度，而且即使在最古老的浏览器中也可以使用！但最重要的是，它允许您的背景填充100％，并随着具有height:auto的内容在垂直方向上增长而进一步向下拉伸。
如果在 body 中设置 height:auto，则不需要使用 overflow:auto 属性。这会使页面的内容高度可以扩展到任何必要的维度，甚至超过视口的高度，如果内容变得比视口页面显示更长。它不会突破 body 的尺寸限制。并且允许根据需要滚动。默认情况下，overflow-y:scroll 允许您向每个 Web 浏览器的页面内容右侧添加一个空滚动条。仅当内容超出视口 100% 的高度时，滚动条才会出现在滚动条区域内。这样，浏览器可以预先计算您的页面宽度以及任何边距或填充，并防止页面在用户查看滚动和不滚动页面时移动。我经常使用此技巧，因为它可以完美地设置所有场景的页面宽度，并且您的 Web 页面永远不会移动和加载非常快！
我相信在大多数 UA 浏览器样式表中，默认情况下 body 的 height:auto。
添加 min-height:100% 可以为 body 提供所需的默认高度，然后允许页面尺寸填充视口，而无需内容突破 body。这仅在 html 基于视口的 100％高度的情况下才有效。
这里的两个关键点并不是单位，例如 % 或 vh，而是确保根元素或 html 设置为视口高度的 100%。其次，重要的是 body 具有 min-height:100% 或 min-height:100vh，因此它始终填充视口高度，无论它是什么。除此之外，没有任何额外的必要。
为传统浏览器设置高度
请注意，我已为 height 和 min-height 添加了 “回退” 属性，因为许多早于 2010 年的浏览器不支持 “vh” 视口单位。虽然假装所有 Web 世界中的人都使用最新和最好的设备很有趣，但现实是许多传统浏览器仍然存在于大型企业网络中，并且许多仍在使用不理解这些新单位的过时浏览器。我们忘记的一件事情是，许多非常老的浏览器不知道如何正确填写视口高度。遗憾的是，这些传统浏览器必须在 html 元素和 body 上都使用 height:100%，因为默认情况下它们都会折叠高度。如果您没有这样做，浏览器的背景颜色和其他奇怪的可视化效果将流动到未填充视口的内容下面。上面的示例应该可以解决所有这些问题，并仍然在更新的浏览器中运行。
在现代HTML5浏览器（2010年后）之前，我们通过在html和body选择器上设置height:100%或只在body上设置min-height:100%来解决这个问题。因此，以上代码可以在20多年的旧版Web浏览器中工作，而不仅仅是过去几年创建的一些浏览器。在旧版Netscape 4系列或IE 4-5中，在body选择器上使用min-height:100%而不是height:100%仍然可能导致高度在那些非常老的浏览器中崩溃，并导致文本溢出背景颜色。但我认为这是唯一的问题。
使用我的CSS解决方案，您现在可以让您的网站在99.99％的浏览器中正确显示，无论是过去还是现在，而不仅仅是过去几年构建的60％-80％的浏览器。
祝你好运！

- Stokely

1

这是迄今为止最完美的解决方案！ - songofhawk

7

如果需要，您也可以使用JavaScript。

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

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

- Herbs

但是为了实现这个，你需要添加更多不必要的东西，比如 jQuery 库并且要用 JavaScript 写代码，而这其实可以用 CSS 完成。 - Front-end Developer

@前端开发人员这不需要jQuery，不幸的是，截至2021年，没有任何CSS解决方案能像这个简单的JavaScript解决方案一样处理浏览器chrome（例如书签选项卡）的问题。脚本编写有其适用的时间和场合，而这就是其中之一。 - Hashim Aziz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BentOnCoding · Accepted Answer

1400

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

html, 
body {
    height: 100%;
}

Body会根据其父元素（HTML）来确定如何缩放动态属性，所以HTML元素也需要设置高度。

但是body的内容可能需要动态更改。将min-height设置为100％可以实现此目标。

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

- BentOnCoding

7

谢谢，这似乎解决了短页面上的白色条问题，但现在在高度超过浏览器窗口高度的页面底部出现了一个20像素的白色条 :| - bodyofheat

62

好的，我知道了！如果我添加html,body {min-height: 100％;}它就可以运行了：D - bodyofheat

17

注意：如果使用body {min-height}版本，则无法使用.body-child{height: 100%}的技巧。 - Salman A

31

最佳答案是使用CSS3，使用“vh” -> body { height：100vh } - 在此处检查答案https://dev59.com/CWw15IYBdhLWcg3wYKqo#25829844。 - Adriano Resende

6

在移动浏览器上，使用100vh作为高度值时，地址栏的高度也被计算在内，导致页面显示不完整。使用100%高度可以排除地址栏的高度，确保整个页面都能够完全显示。@AdrianoResende - Bastiaan ten Klooster

显示剩余14条评论