Fill height of second div to 100% of page (pure css)

Question

Is it possible with the latest in CSS to get a flexible height div (a) and a div (b) which stretches to fill the page?

Something in the line of :

div.a { height: calc(100% - div.a.height); }

body {
  background-color: #FEFEFE;
}
div {
  padding: 20px;
  margin: 10px;
  border: 4px solid black;
  width: 100px
}
div.a {
  background-color: #278dae;
}
div.b {
  background-color: #409b24;
  /*height: calc(100% - div.a.height);   <-- this */
}

<body>
  <div class="a">a</div>
  <div class="b">b</div>
</body>

Possible duplicate - http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1 — Paulie_D, Nov 05 '15 at 14:52

score 8 · Accepted Answer · answered Nov 05 '15 at 14:51

Flexbox can do that:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  background-color: #FEFEFE;
  display: flex;
  flex-direction: column;
}
div {
  padding: 20px;
  margin: 10px;
  border: 4px solid black;
  width: 100px
}
div.a {
  background-color: #278dae;
}
div.b {
  flex: 1;
  background-color: #409b24;
}

<body>
  <div class="a">a</div>
  <div class="b">b</div>
</body>

Fill height of second div to 100% of page (pure css)

1 Answers1