部分的动态高度

这个问题在这里已经有了答案：

让div填充剩余屏幕空间的高度31个答案

---

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>

链接地址: http://www.djcxy.com/p/88251.html

上一篇: Dynamic height of section

下一篇: Force a container to fill the residual space