用ChatGPT解决这个技术问题 Extra ChatGPT

使正文具有浏览器高度的 100%

我想让 body 有 100% 的浏览器高度。我可以使用 CSS 做到这一点吗？

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

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

CSS3 Viewport-percentage lengths

N
Nick Heiner

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

html, 
body {
    height: 100%;
}

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

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

html {
  height: 100%;
}
body {
  min-height: 100%;
}
谢谢，这似乎删除了短页面上的白条，但现在在高度超过浏览器窗口高度的页面上，我在底部得到一个 20px 的白条：|
好的，我发现了！如果我添加 html,body{min-height:100%;} ：D
注意：如果您使用 body {min-height} 版本，则不能使用 .body-child{height: 100%} 技巧。
最好的答案是使用 CSS3，使用 vh -> body { height: 100vh } - 在此处查看答案stackoverflow.com/a/25829844/2680216
@bFunc 我有这个 chrome 问题。 html{height:100%;} body {height:auto} 完成这项工作。
C
Community

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

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

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

Example Here 

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

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

大多数现代浏览器都支持这一点 - support can be found here。

除了这非常简单之外，我们采用新的做法也很好。
@niaster 我绝对同意。自从我也发布了这个答案以来，浏览器支持已经得到了改善:)
不知道为什么我们需要在旧做法正常工作时开始“采用新做法”。这样做没有任何好处：代码不会更小，性能也不会更好，而且仍然存在不支持 vw/vh 的浏览器。
Chrome 用户代理样式表默认为正文添加 8px 边距（不确定其他浏览器），因此我还必须添加 margin: 0; 以避免右侧持续垂直滚动条。
此解决方案会在移动设备（Chrome、Android）上产生额外的滚动，因为它在计算视口高度时没有考虑工具栏。
A
Angry Dan

如果您有背景图像，那么您将需要设置它： 

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

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

请记住，如果您必须支持 IE6，您将需要找到一种方法将 height:100% 插入 body，IE6 无论如何都会将 height 视为 min-height。

当 body 正下方有一个全局 flexbox 时也可以工作（body > #flexbox-wrapper）
这是正确的答案，因为接受的答案不会随着内容的长度超过单个屏幕而增长。
非常感谢你，愤怒的丹，我网站底部那个丑陋的空白已经消失了！
当然，既然提出了这个问题，基于视口的维度就变成了一个事情。所以现在你可以做body{min-height: 100vh}
您还需要 body { height: auto; } 才能在 FireFox 中不显示滚动条。除此之外，完美无缺。
D
Daniel Patru

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

感谢您提供唯一有效的答案:)我认为“绝对”使它起作用
在没有滚动条的 Firefox 中非常适合我，谢谢。接受的答案没有。
@Andrew 奇怪的是，这在 FireFox 中提供了滚动条。但是，您需要接受的答案是 body 子句中的 height: auto; 以及现在弹出的滚动条。
@Torxed 我仍然可以在 FireFox 中获得滚动条。将自动设置添加到高度似乎对我不起作用:(
这在 Chrome 56.0.2924.87（64 位）中对我不起作用。
s
sherpya

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

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 或 table 占据一个百分比高度，如下所示：

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

希望这可以帮助某人。我认为浏览器处理不正确。如果它的孩子溢出，我希望身体的高度会自动调整变大。但是，当您使用 100% 高度和 100% 宽度时，这似乎不会发生。

我尝试了此页面上所有高票的答案，但没有一个有效。这个做到了！
这个答案应该是公认的。 height: 100vh 也不是解决方案。如果容器有滚动条，将顶部容器设置为 100vh 高和 100vw 可能会导致问题 - 然后它会比它应该的大（并且可能导致滚动条不必要地可见）。 height: 100vh 在较新的 Android 设备（例如带有 Android 9 的小米米 9）上也给我们带来了问题，其中容器会比屏幕本身大，并且会对文档正文产生不必要的垂直滚动条。
我认为身体最小高度及其子高度问题是因为您无法将动态属性的百分比值计算为最小高度。因为 min-height 是动态的而不是静态的。
2 小时后，这是唯一对我有用的解决方案。谢谢你！
当你有例如时也能正常工作。开发工具打开并且 100 vh 不可用 +1
M
Mori 
html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}
J
Jayant Varshney

快速更新 

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

当今 CSS 的更好解决方案 

html, body{ 
  min-height: 100vh;
  overflow: auto;
}
这与现有答案有何不同？
我也尝试过其他人，但对我没有用。这个有效，所以它可以成为有需要的人的解决方案。 @cimmanon
我不得不说这个对我有用，而不是其他高票答案。 overflow: auto 在这里发挥作用。顺便说一句，我使用 Chrome。
唯一允许溢出内容调整高度的选项（我发现）。
如果您使用浮动，这是完美的答案
M
MineAndCraft12

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

html, body{
    margin: 0;

    padding: 0;

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

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

的边距确保 HTML 和 BODY 元素不会被浏览器自动定位，以便在它们的左侧或右侧留出一些空间。

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

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

此解决方案还意味着，就像我几年前刚开始使用 HTML 和 CSS 时所做的那样，您不必为您的第一个 <div> 提供 margin:-8px; 以使其适合浏览器窗口的角落。

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

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

您能否解释一下，width: 100% 用于 body 和 html 元素的可能用途是什么？是的，我理解，从实际的角度来看，body { margin: 0; } 在大多数情况下应该足够了。我只是想更彻底地了解。
E
Eddie

这里： 

html,body{
    height:100%;
}

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

如果需要也可以使用 JS 

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

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}
但是为此，您需要添加比需要更多的东西，例如 jQuery 库和用 JavaScript 编写，而这可以在 CSS 中完成。
@Front-endDeveloper 这不需要 jQuery，不幸的是，截至 2021 年，没有任何 CSS 解决方案能够像这个简单的 JavaScript 解决方案那样处理浏览器 chrome （如书签标签）的问题。编写脚本有时间和地点，就是这样。
m
medBouzid

我会用这个

html, body{ 背景：#E73;最小高度：100%；最小高度：100vh；溢出：自动； // <- 当你调整屏幕大小时需要这个 }

浏览器将使用 min-height: 100vh，如果浏览器有点旧，则 min-height: 100% 将作为后备。

如果您希望 body 和 html 在调整屏幕大小（例如移动设备大小）时扩展它们的高度，则 overflow: auto 是必需的

a
ak-SE

尝试 

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
您能否解释一下，width: 100% 用于 body 和 html 元素的可能用途是什么？是的，我理解，从实际的角度来看，body { margin: 0; } 在大多数情况下应该足够了。我只是想更彻底地了解。
T
ThomasThiebaud

请检查： 

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

或尝试新方法 Viewport height ： 

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

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

请包括对您的解决方案的解释，以便找到此答案的其他人能够理解。谢谢！
您能否解释一下，width: 100% 用于 body 和 html 元素的可能用途是什么？
所以假设我有一个包含 50 列和 1000 行的表格，其数字在 1000 到 9999 之间，它们会发生什么，它们会像我们通常那样滚动到窗口之外，还是它们会有溢出类型的滚动条
F
Filipe Freire

如果你不想编辑自己的 CSS 文件和自己定义高度规则的工作，最典型的 CSS 框架也解决了这个问题，body 元素填充整个页面等问题，轻松地使用多个视口的大小。

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

S
Stokely

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

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

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

对于初学者来说，只要您将 html 设置为 100% 或 100vh 的高度，新的视口单位（“vh”）是多余的并且不是必需的。原因是 body 从 html 父级派生其值。较旧的浏览器不会像较新的浏览器那样继承视口高度，但它们确实知道 min-height。您仍然可以在 body 中使用“vh”单位来绕过父 html 值并直接从现代浏览器的视口中获取其属性尺寸。但如果 html 具有 100% 高度，则它是可选的，body 将正确继承。

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

添加 min-height:100% 会为您提供希望 body 具有的默认高度，然后允许页面尺寸填充视口，而不会超出正文。这只是因为 html 已根据视口派生了 100% 的高度。

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

旧版浏览器的样式高度

请注意，我为 height 和 min-height 添加了“备用”属性，因为 2010 年之前的许多浏览器不支持“vh”视口单元。假装网络世界中的每个人都使用最新最好的版本很有趣，但现实情况是，如今大型企业网络中仍然存在许多旧版浏览器，并且许多仍然使用不了解这些新单元的过时浏览器。我们忘记的一件事是许多非常旧的浏览器不知道如何正确填充视口高度。遗憾的是，这些旧版浏览器只需要在 html 元素和 body 上都有 height:100%，因为默认情况下它们都默认折叠高度。如果您不这样做，浏览器背景颜色和其他奇怪的视觉效果将在未填充视口的内容下向上流动。上面的示例应该可以为您解决所有这些问题，并且仍然可以在较新的浏览器中使用。但是在现代 HTML5 浏览器（2010 年后）之前，我们通过在 html 和正文选择器中设置八个 height:100% 或在两个标签中设置 min-height:100% 来解决这个问题。

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

S
Sanjib Debnath

只需要 1 行 CSS……你就可以完成。 

body{ height: 100vh; }
当心这个。 100vh 实际上是 not what you expect for iOS Safari.
w
wasimv09

所有答案都是 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.

Y
Yvonne Ng

我为 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;
}
flex box 向下有多远真是太疯狂了。这是我在项目中使用的，它在 react 或 vue 等框架中运行良好
H
Hashim Aziz

后来有 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 */
}
A
Anburaj_N

这里更新 

html
  {
    height:100%;
  }

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

对于真正的纯粹主义者来说，这会尊重浏览器的默认边距，并防止其他方法生成不需要的滚动，除非内容增长。在 Chrome、Safari 和 Firefox 中测试。背景只是为了展示...

html {显示：弹性；弹性方向：列；高度：100%；背景：红色； } 身体 { 弹性：1;背景：绿色； }

J
Josh Crozier

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

我不推荐使用 overflow:hidden ，除非你有充分的理由。找出溢出的原因并进行调整，使其不会溢出
I
Imagine Breaker 
@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }
您能否解释一下，width: 100% 用于 body 和 html 元素的可能用途是什么？是的，我理解，从实际的角度来看，body { margin: 0; } 在大多数情况下应该足够了。我只是想更彻底地了解。
s
silvachathura

CSS3 有一个新方法。 

 height:100vh

它使 ViewPort 100% 等于高度。

所以你的代码应该是 

 body{
 height:100vh; 
 }
这与我一年前 9 月发布的 the answer 有何不同？
为什么你双重回答？

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

友情链接

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.