Flex-box with the central element that fills all the free space

Question

I am trying to design the web page with the following document tree (as to avoid the appearance of the scroll as much as possible):

html 
  head
  body
    div (flex-box - height 100%)
      header (flex-child - fixed height)
      main (flex-child - consumes all the remainig space/height)
      footer (flex-child - fixed height)

Apparently, flex-box is the best solution, but I am reading this nice guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and it appears that there are only limited options how to distribute the space (how to distribute the height of elements) - there are some "growth" properties but nothing else. How can I make the structure I am aiming to achieve? I have no code because I don't see the necessary CSS properties for making even a starter example.

What do you expect when you set `height: 100%`? Without a reference, the line will actually do nothing: unless you let the `
` know what it should measure `100%` against. The viewport height? — Terry, Jan 22 '19 at 14:41
Your question is a little unclear -- why don't you first try making the structure you mention and then applying the CSS styles mentioned and then seeing how it might or might not differ from your desired outcome? — TylerH, Jan 22 '19 at 14:42
@Terry - yes, against the viewport height. My customers hate scrollbars! — TomR, Jan 22 '19 at 14:43
@TylerH - I have larger project and I experiment with it. Flexbox provides some kind of proportional growth where I can specify the proportions, but I need fixed header, footer and flexible central pane. — TomR, Jan 22 '19 at 14:44
@TomR OK, so... build out the layout you describe above in your larger project and experiment. Then ask a concrete question if your experiment does not do what you want :-) — TylerH, Jan 22 '19 at 14:46

score 4 · Accepted Answer · answered Jan 22 '19 at 14:44

I suppose this is what you're looking for. If you want to use flex you would set its direction to column, and set the height of the container as 100vh, then you set the flex-grow property to the body of the page so it uses the remaining space.

Better see it in full screen

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  background: red;
  height: 40px;
}

.body {
  flex-grow: 1;
  background: green;
}

footer {
  background: blue;
  height: 40px;
}

<div class="container">
  <header>

  </header>
  <div class="body">

  </div>
  <footer>

  </footer>
</div>

Flex-box with the central element that fills all the free space

1 Answers1

Linked