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

HTML Code:

<!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 Code:

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
}

What I expected to see was a red rectangle floating in the middle of the screen but what I get is the rectangle being at the top-middle.

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

It never worked in FF, it worked in chrome before adding the DOCTYPE tag but after that it no longer works in chrome either.

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

What does work is when I use height instead of min-height but I don't want to pin down the height value to the size of the screen since I may need it when containers long enough to scroll come into play.

当我使用高度而不是最小高度时,工作是什么,但我不想将高度值固定到屏幕的大小,因为当容器长到足以滚动时,我可能需要它。

2 个解决方案

#1

Set the min-height property to 100vh (viewport height). Your body's minimal height will then be 100% of the viewport.

将min-height属性设置为100vh(视口高度)。然后,您身体的最小高度将是视口的100%。

#2

Because it's a circular reference.

因为它是循环引用。

You can set min-height: 100% to html. That means it will be at least as tall as the viewport, but can grow taller if the contents (i.e. body) are taller.

您可以将min-height:100%设置为html。这意味着它至少与视口一样高,但如果内容(即身体)更高,则可以长得更高。

Since the height of html depends on the height of body, the height of body can't depend on the height of html. So if you set min-height: 100% to the body, it won't work.

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

However, you can use explicit height:

但是,您可以使用显式高度:

Set height: 100% to html. This will make it cover the viewport, ignoring the height of body.

设置高度:100%到html。这将使它覆盖视口,忽略身体的高度。

Set min-height: 100% to body. This will make it be at least as tall as html.

设置最小高度:100%到身体。这将使它至少与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>

#1