Question

Chrome最近似乎改变了处理height和min-height的方式。以前在元素上设置min-height类似于设置height，因为任何子元素都可以使用基于父高度的百分比高度。似乎不再是这种情况了，只有明确的高度而不是明确的min-height才足以为子元素提供一个可以使用百分比高度的上下文。

因此，在height: 100%元素和html元素上设置body会导致它们固定在初始视口的高度。

如何在为子元素提供百分比高度上下文的同时使body元素扩展到其内容的高度？

Answer 1

你有一个问题的例子吗？

百分比高度从未基于最小高度;它们仅基于具有已知高度（不是内容高度而非最小高度）的父级。这意味着父级必须具有固定的像素高度，或者父级必须具有基于可以解析高度的另一个父级的百分比高度。

通常的解决方法是将html和body设置为高度：100％，然后将页面包装器设置为min-height：100％。虽然html和body固定为100％，但这不会成为问题，因为包装器只是溢出（除非你为html和body添加不同的背景，这通常不推荐）。

e.g。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
    height:100%;
    margin:0;
    padding:0;
    background:blue;
}
.wrapper {
    min-height:100%;
    max-width:1150px;
    margin:auto;
    background:#f9f9f9;
    padding:10px;
}
</style>
</head>

<body>
<div class="wrapper">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
</div>
</body>
</html>

如果你看到不同的东西，或者你有不同的设置，那么我们需要看一个例子：）

（当然对于现代浏览器，我们可以使用vh单元使元素延伸到视口的底部。）

Answer 2

在下面的代码段中，我在html和body上设置了100％的高度，但内容基于body最小高度而不是视口高度。当您添加更多内容时，body会扩展，您会看到黄色边距。这似乎与您的陈述相矛盾，但也许我们正在使用不同版本的Chrome：

html, body {
  height: 100%;
}

body {
  min-height: 1000px;
  background: yellow;
}

div {
  height: 20%;
  border: 1px solid black;
  background: #def;
}

<div>Lorem</div>
<div>Ipsum</div>
<div>Dolor</div>
<div>Marco</div>
<div>Polo</div>

Chrome的高度/最小高度处理

2 个答案: