html - 高度 : Fill whole viewport but scroll if neccessary

Question

我想将视口(viewport)分成 3 行:

1.) 标题

2.) 内容

3.) 页脚

页眉和页脚具有固定高度，而内容应根据其内部文本具有灵活的高度。规则应该是:

1.) 如果页眉+内容+页脚的高度小于视口(viewport)，则应增加内容的高度，使页眉+内容+页脚的高度与视口(viewport)。

2.) 如果页眉 + 内容 + 页脚的高度大于视口(viewport)，则应该出现垂直滚动条。

我认为这很简单，但是在 html、body 和 wrapper 上使用 height:100% 不适用于规则 2。)在 html、body 和 wrapper 上使用 min-height:100% 不适用于规则 1 .)

知道如何让它发挥作用吗？

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

.wrapper {
  display: flex;
  flex-direction: column;
}

.header,
.footer {
  height: 20px;
  background-color: #a0a0a0;
}

.content {
  flex-grow: 1;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="footer">Footer</div>

Answer 1

您的 CSS 有错误。

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

问题是 wrapper 应该是 .wrapper。此外，不要为 html、body、.wrapper 等设置 100% 高度。所有你需要担心的是.wrapper。只需在上面设置 min-height: 100vh 即可。我正在将浏览器提供的默认边距归零，但这是可选的，与您的问题无关。

html,
body {
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;      /* <-- All that's needed */
}

.header,
.footer {
  height: 20px;
  background-color: #a0a0a0;
}

.content {
  flex-grow: 1;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="footer">Footer</div>
</div>