Question

HTML代码：

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <link rel="stylesheet" type="text/css" href="style.css">
      <div class="sheet" style="width:80%;max-width:1024px;height:400px;"></div>
   </body>
</html>

CSS代码：

html,
body {
    min-height: 100%;
    margin: 0;
    padding: 0
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.sheet {
    background-color: red
}

我期望看到的是一个漂浮在屏幕中间的红色矩形，但我得到的是位于顶部中间的矩形。

它从未在FF中运行，它在添加DOCTYPE标签之前在chrome中工作，但之后它也不再适用于chrome。

当我使用height代替min-height时，工作是什么，但我不想将高度值固定到屏幕的大小，因为当容器长时我可能需要它足以滚动发挥作用。

Answer 1

将min-height属性设置为100vh（视口高度）。然后，您身体的最小高度将是视口的100％。

Answer 2

因为它是循环参考。

您可以将min-height: 100%设置为html。这意味着它至少与视口一样高，但如果内容（即body）更高，则可以变得更高。

由于html的高度取决于body的高度，body的高度不能取决于html的高度。因此，如果您将min-height: 100%设置为body，则无效。

但是，您可以使用显式高度：

将height: 100%设为html。这将使其覆盖视口，忽略body的高度。
将min-height: 100%设为body。这将使其至少与html一样高。

html, body {
  margin: 0;
  padding: 0
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.sheet {
  width: 80%;
  max-width: 1024px;
  height: 400px;
  background-color: red;
}

<div class="sheet"></div>

为什么我不能将html min height设置为100％？

2 个答案: