【发布时间】：2021-01-08 02:13:02
【问题描述】：
我的 body 元素有问题。它似乎填充了 100% 的屏幕。但是，如果您将浏览器拖小然后向下滚动 - 主体不会延伸。
请参阅this jsFiddle 作为主要示例。
【问题讨论】：
【发布时间】：2021-01-08 02:13:02
【问题描述】：
height: 100%;是网站显示窗口的高度，而不是网站的高度，导致向下滚动时背景变紫。
只需添加这个：
html { background: green; }
并删除
body { background: green; }
让背景始终为绿色。 (JSFiddle)
【讨论】：
-
我想知道这是否是 100% 所指的。您的解决方案修复了颜色......但是实际内容是如何从 body 元素中出来的......这确实是问题所在......它似乎不正确。我对其进行了明确的修复...我的意思是，为什么包裹我整个站点的身体-无法容纳全部。我主要是用颜色来说明这一点。
-
很多博客都说 html, body {height:100%} 然后 main-container{min-height:100%} 但这也不起作用……也许没有答案。 ..但我只是想一劳永逸地解决这个问题。这个问题在这里被问了至少 5 次。我从未见过与下面的答案不同的答案。 （这不起作用）
我相信THIS FIDDLE 回答了这个问题。我一直在生产中使用它，并且效果很好。
HTML：
<html>
<body>
<div class="main-wrapper contain">
<section class="main-content">
Main Content
</section> <!-- end .main-wrapper -->
<div class="other-thing">
Other thing for example.
</div>
</div> <!-- .main-wrapper -->
</body>
</html>
CSS：
/* hard reset */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
padding: 0; margin: 0;
}
/* micro clear fix (clears floats) */
.contain:before,
.contain:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.contain:after {
clear: both;
}
.contain {
*zoom: 1;
}
html {
height: 100%; /* 01 */
/* tells html to go ahead and feel free to be 100% height */
}
body {
min-height: 100%; /* 02 */
/* expands to push html to the limit */
}
.main-wrapper {
/* overflow: hidden; */
/* in this case - forces wrapper to contain content (like a clear-fix) */
/* use clear fix instead */
}
/* if you see yellow - we are failing */
.main-content {
width: 100%;
float: left;
}
.other-thing {
width: 100%;
float: left;
}
我已经对此进行了测试 - 假设您保留了所有容器和实际包含的东西，它似乎在所有情况下都有效。这个溢出肯定有缺点：隐藏；否则人们不会使用 clear-fix。所以 - 我很想听到更多的意见。
或者，我认为 html 和 body 可以是 100%，然后 .main-wrapper 可以是 min-height: 100%;这也有效。基本上 - 有些东西需要迫使它的所有容器伸展。为了做到这一点，所有这些容器都必须设置为 100%，以便他们记住他们有这种能力。还是我将 div 拟人化太多了...
2021 年更新：
网络的本质是允许内容定义“形状”或“空间”或任何你想称呼它的东西......所以 - 身体并不真正知道它有多“高”。它知道它是 100% 宽度，因为它是块级元素。所以，除非你告诉 HTML 是 height: 100%，然后是每个孩子……那么他们就不会真正知道“100%”的真正含义。 100% 什么？对于仪表板应用程序和桌面全屏布局，您可能需要设置高度（但在大多数情况下不是） - 现在可以使用 100vh 单位。一般规则：让内容决定它的父元素的大小并与 Web 的性质一起工作。 （忽略上面的所有代码！现在是 2021 年：flex-box + grid！:)
【讨论】：
-
我实际上使用的是 micro clear-fix 而不是现在隐藏的溢出，因为它切断了 box-shadow 之类的东西。
-
2021 年！更新：现在不需要任何清除修复类型的东西。 :)
只需从您的<body> 中删除height: 100%; 并从您的<figure> 中删除height: 300px;，您就可以开始了。
您也可以使用此代码：http://jsfiddle.net/Asustaba/LBu8z/8/
【讨论】：
-
根据我的理解，添加 height:auto 和只省略 height 之间并没有真正的区别 -
-
没错，但您没有这样做，您将图形标签的高度设置为 300px（在您的问题中查看您的 JSFiddle）
-
jsfiddle.net/sheriffderek/LBu8z/9 我明白你的意思。但这与问题无关。看到这个小提琴......现在文字大约是 300px 高。并且高度是自动的 - 这是同样的问题。
-
我再次编辑了我的帖子，现在它正在工作，如果你能将我的答案标记为正确，那就太好了:)
-
我仍然不相信答案就是我想要的。也许我一直口齿不清。 height:auto 似乎是不必要的。看到这个新的小提琴jsfiddle.net/sheriffderek/CPVnu --- html 设置为 100%，body 设置为 min-height 100% --- 我的目标不是修补我的问题 - 而是一劳永逸地决定我将使用什么从现在开始编码。一个很好的例子是当你引入一个叠加层——比如一个灯箱——然后背景变黑——但是如果你滚动——那么背景只有实际浏览器窗口的 100% 高度，然后你滚动并 !@#*
1) 如果你想让 body 填满整个屏幕，同时解决 2 个问题（由于 body 具有动态内容）
- 内容不足：主体至少与视口一样高，因为您的主体没有足够的内容来填满屏幕
- 内容过多：body 应该和 html 一样高
现在您可以为此使用 min-height:100vh，这意味着 100% 的视口高度： http://jsfiddle.net/LBu8z/89/
除 Opera Mini 外，所有浏览器均支持：caniuse.com/#search=vh
2）如果你想要一个固定的背景图片，那么我建议拉伸一个固定位置的body:after
我在生产中需要这个解决方案，因为 background-sizing:cover 在固定的背景下无法正常工作，因此我必须制作 body:after 固定并且背景图像不固定。你可以在这里查看：https://www.doklist.com/
body:after{
content:"";
background:green;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
}
3) 如果你只想用 body 来做，那么：用溢出滚动拉伸一个固定的 body。但请注意，它可能会干扰某些元素（例如引导工具提示和弹出框）
body {
background: green;
overflow-y:scroll;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}
【讨论】：
-
这可能会创造它的“外观”，但身体实际上并没有这样做。
-
身体上的固定定位背后的原因是什么？ jsfiddle.net/sheriffderek/ph6d4xcd
-
你想要两件事：1）你的身体是至少视口的高度，2）如果内容大于视口，那么你的body 的高度与 html 的高度相同。您链接的内容不符合第一个目标：jsfiddle.net/ph6d4xcd/1 如果您使用固定，则表示它一直固定在视口中，当您将顶部、底部、左侧、右侧设置为 0 进行拉伸时，您确保它总是填满整个视口。
-
我明白你在说什么，但目标是尽可能少地改变 HTML 文档流的工作方式。滚动劫持它并固定在整个东西上是相当沉重的。 - 另外，这是我 5 年前写的。
-
顺便说一句，另一方面，我为 flex-box 测试了opera mini - 它似乎工作。