Dynamic height of section

This question already has an answer here:

Make a div fill the height of the remaining screen space 31 answers

---

Flexbox is ideal for this, check the following layout:

Footer will dynamically grow/shrink depending on content.

Middle content will always be 100% - .footer as desired.

overflow: auto; on middle .content is set in case there is more content, this way it will avoid pushing footer.

* {
  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/88252.html

上一篇: 获取自我的顶部坐标

下一篇: 部分的动态高度