Question

我的网站有3个部分，标题（导航栏）+中间（内容）+页脚（站点地图等）。我的标题是固定的高度，我的页脚包含可能会不时更新的站点地图，因此页脚高度可能会增加。

我想在我的中间应用100vh。我如何使用.middle{height: calc(100vh - footer.height);}之类的内容？

Answer 1

Flexbox非常适用于此，请检查以下布局：

页脚将根据内容动态增长/缩小。
根据需要，中间内容始终为100% - .footer。

overflow: auto;

.content以防万一有更多内容，这样就可以避免推送页脚。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  height: 100%;
}
.header {
  border: 1px solid red;
  width: 100%;
  height: 60px;
}
.content {
  flex: 1;
  width: 100%;
  border: 1px solid gray;
  overflow: auto;
}
.footer {
  display: flex;
  width: 100%;
  border: 1px solid orange;
}

<div class="container">
  <div class="header">navbar</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum repellendus neque repudiandae fugiat error blanditiis omnis nesciunt nostrum porro, officia vel cum deleniti adipisci nihil perferendis eos, veniam numquam, ipsum.</div>
  <div class="footer">footer</div>
</div>

截面的动态高度

1 个答案: