How do I get middle div to expand to fill the horizontal space of the viewport account for headers and footers?

Question

https://jsfiddle.net/chovy/5vofg0cr/8/

<div class="navbar">
navbar
</div>
<section>
  <header>header</header>
  <div class="chat">
  chat window
  </div>
  <footer>
    <textarea>chat enter</textarea>
  </footer>
</section>

css:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 1px solid gray;
}

.navbar {
  height: 2rem;
}

section {
  height: calc(100vh - 2rem);
}

.chat {
  background-color: green;
  height: 100%;
}

I'm trying to make the whole thing fit 100% of viewport without overflowing past the viewport size (ie: different window sizes)

Answer 1

I usually keep track of both the footer and the headers height in a css variable, then use min-height in combination with the calc() method.

:root {
  --header-height: 2rem;
  --footer-height: 4rem;
}

header {
  background-color: magenta;
  height: var(--header-height)
}

.chat {
  background-color: aqua;
  min-height: calc(100vh - var(--header-height) - var(--footer-height))
}

footer {
  background-color: green;
  height: var(--footer-height)
}

<header>header</header>
<div class="chat">
   This will fill up the entire remaining space even if there is not enough content
   to fill up vertical space, so the footer will always stick to the bottom of the screen
</div>
<footer>footer</footer>

Using min-height has a few benefits, first off it'll allow your content to grow over the value you set (more than 100vh for example). second, it'll keep the footer on the bottom of the screen, even if there isn't enough content to fill 100vh

calc() being the awesome method that it is, will allow you do use any unit you want (%, px, em, rem, vh)