为啥当 min-height: 100% 时 HTML 和 BODY 不占用文档的所有可用高度？ [复制]

Posted 2023-03-06

【中文标题】为啥当 min-height: 100% 时 HTML 和 BODY 不占用文档的所有可用高度？ [复制]

【英文标题】：Why doesn't HTML and BODY take all available height of document when min-height: 100%? [duplicate]为什么当 min-height: 100% 时 HTML 和 BODY 不占用文档的所有可用高度？ [复制]

【发布时间】：2013-05-28 02:21:51

【问题描述】：

我一直在努力理解这种情况

我已经在 CSS 中设置了

html, body 
    min-height: 100%;

这样当页面上没有内容时，html和body占据页面高度的100%。如果正文中有内​​容，则应根据内容高度更改其高度。

但是当我在页面上添加一些内容（足以显示滚动条）时，html 和 body 并没有占据文档的 100% 高度。即如果我的屏幕高度是 700px，无论哪种情况$('body').height() 都会返回 700px；

这是为什么呢？

编辑： 换句话说，我希望我的 body Tag 至少占屏幕的 100%，但如果添加内容，它应该会增长。

【问题讨论】：

我不知道答案，但是你在所有浏览器中都测试过吗？

嗯，想起来，我可能已经快了。问题是“为什么”，而不是如何让事情 100%。道歉。

我无法重现您的 Jquery 行为。见jsfiddle.net/VEsXm/1

@Alohci 在你的小提琴中，如果你删除所有

@TaylorFlores 是的，我在 Chrome、Firefox 和 IE10 中测试过

【参考方案1】：

一开始我误读了这个问题，但转念一想我会将其解释为：

html 元素忽略 min-height: 100%。

为什么会这样？

“为什么”的答案在the relevant spec，强调我的：

最小高度

...

值：<length> | <percentage> | inherit

...

<percentage> 指定用于确定使用值的百分比。百分比是相对于生成框的包含块的高度计算的。 如果没有明确指定包含块的高度（即取决于内容高度），并且该元素不是绝对定位的，则百分比值被视为'0'（对于'min- height'）或'none'（用于'max-height'）。

这就是为什么您需要为min-height 设置html 元素的高度以处理body 元素。或者，您可以绝对定位 html 元素，如下所示：

html  border: 10px solid black 
body  border: 10px dashed red 

html  position: absolute; top: 0; bottom: 0; left: 0; right: 0;     
/* alternatively: html  min-height: 100%; height: 100%;  */    

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

请参阅the position: absolute demo 或the height: 100% demo。

感谢@Alohci 纠正我对规范的解释。

【讨论】：

规范的正确位，但我不确定解释是否正确。我认为 min-height 确实对 html 元素有影响（尝试在它周围加上和不带 min-height 的边框）。但是由于没有明确指定html元素的高度，所以min-height对body元素没有影响。

使用边框，而不是背景颜色。 background-color 具有误导性，因为它也被应用于视口。请参阅 jsfiddle.net/HxzjD/1 与 jsfiddle.net/PE8Bc/1

@Alohci 你说的很对。我已删除我的评论，并尝试根据您的评论更新我的答案。如果您觉得可以改进或澄清，请随时编辑我的答案。

所以我一直在阅读你的答案并试图理解，最后我知道出了什么问题，我应该怎么做才能解决它。诀窍是 html min-height: 100%;高度：100%； 。谢谢

我相信有 min-height:100%; height:100%; 是多余的，不是吗？

【参考方案2】：

在您描述的情况下，html 和 bodydo 占据了屏幕高度的 100%。添加背景颜色以查看：

body 
    background-color: lightblue;

您会看到整个屏幕现在都是彩色的。您从中获取 .height() 的 jquery 语句仍然只返回内容的高度，而不是被拉伸到屏幕的高度。当您有滚动条时，body 的 .height() 将返回所有内容的高度，而不仅仅是可见区域。您可以使用$(window).height() 获取窗口的高度。有关演示，请参阅 this fiddle。

【讨论】：

我相信我无法正确传达我的问题，这不是我想要的。顺便说一句，Jeroen 的回答有帮助所以我接受了他的回答