css - 如何在 HTML 中实现带有页眉布局的 ScrollView

Question

我想知道如何使用 HTML 实现以下布局。

我不知道如何让蓝色的 div 填充剩余的高度。

谢谢!

Answer 1

您可以使用 Flexbox和 overflow: auto(将 header 上的 50px 更改为您想要的高度)。

body, html {
  margin: 0;
  padding: 0;
}

.element {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  height: 50px;
  background: #ED7D31;
}

.content {
  flex: 1;
  background: #5B9BD5;
  overflow: auto;
}

.inner {
  height: 1000px;
}

<div class="element">
  <header>Header</header>
  <div class="content">
    <div class="inner">Content HEre</div>
  </div>
</div>

使用 calc() 的其他解决方案

body, html {
  margin: 0;
  padding: 0;
}

.element {
  height: 100vh;
}

header {
  height: 50px;
  background: #ED7D31;
}

.content {
  height: calc(100vh - 50px);
  background: #5B9BD5;
  overflow: auto;
}

.inner {
  height: 1000px;
}

<div class="element">
  <header>Header</header>
  <div class="content">
    <div class="inner">Content HEre</div>
  </div>
</div>