时间戳

首页 > 解决方案 > 高度：填充整个视口，但必要时滚动

html - 高度：填充整个视口，但必要时滚动

问题描述

我想将视口分成 3 行：

1.) 标题

2.) 内容

3.) 页脚

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

1.) 如果header+content+footer的高度小于viewport，则增加content的高度，使header+content+footer的高度与viewport的高度一致。

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

我认为这很容易，但是在 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>

标签： htmlcss

解决方案

您的CSS.

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

问题是wrapper应该是.wrapper。此外，不要费心在、、等上设置100%高度。您只需要担心。只需设置它，你就完成了。我将浏览器提供的默认边距归零，但这是可选的，与您的问题无关。htmlbody.wrapper.wrappermin-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>

推荐阅读