html - 为什么我不能将 html 最小高度设置为 100%？

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 时有用，但我不想将高度值固定为屏幕大小，因为我当容器长度足以滚动时可能需要它。

最佳答案

将最小高度属性设置为 100vh(视口(viewport)高度)。您 body 的最小高度将是视口(viewport)的 100%。

关于html - 为什么我不能将 html 最小高度设置为 100%？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33319910/