14

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

我已经在 CSS 中设置了

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

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

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

这是为什么？

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

4

2 回答 2

13

起初我误读了这个问题，但在第二个想法我将其解释为：

该html元素忽略min-height: 100%.

这是为什么？

“为什么”的答案在相关规范中，强调我的：

最小高度

...

价值：<length> | <percentage> | inherit

...

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

这就是为什么您需要为元素设置一个高度以便在该html元素min-height上工作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%; }

请参阅演示或演示。_position: absoluteheight: 100%

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

于 2013-06-01T09:54:27.497 回答
1

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

body {
    background-color: lightblue;
}

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

于 2013-06-01T09:53:38.483 回答