Dynamic height of section

Question

My website has 3 section, header(navbar)+middle(content)+footer(sitemap etc). My header is a fixed height, my footer contain sitemap which may update time to time, therefore the footer height may increase.

I want to apply 100vh on my middle. How do I use something like .middle{height: calc(100vh - footer.height);}?

One possible solution, I can think of is storing the height of the footer as a variable via js and implementing the CSS through that JavaScript as well. Unfortunately, I don't think there is any way to dynamically "get" any heights and use them within CSS, since you'd be finding out the size of the footer on page load rather than explicitly — Ryan Green, Jan 15 '17 at 17:07

score 0 · Accepted Answer · answered Jan 15 '17 at 17:50

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>

Dynamic height of section

1 Answers1