0

I am try to apply flex box to my layout, but i am bit lost on how to achieve the following. How would i achieve this so the 3 panel always take the full screen with 5% 90% and 5%.

Note: at the moment i have top and bottom position fixed, and javascript calculate the height with the middle panel but it's not ideal.

enter image description here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Bill
  • 17,872
  • 19
  • 83
  • 131

1 Answers1

1

Possible duplicate of : Fill remaining vertical space with CSS using display:flex

however:

html,
body {
  height: 100%;
  margin:0;
}
body {
  display: flex;
  flex-direction: column;
  background: turquoise;
}
header {
 height:15%;
}

footer {
 height:5%;
}
main {
  flex:1;  
  background: tomato;
}
<header>
  header 15%
</header>
<main>
  main room left
</main>
<footer>
  footer 5%
</footer>
Community
  • 1
  • 1
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • can you do px on the header and footer and content middle takes up the remaining. – Bill Nov 12 '15 at 23:36
  • @bluebill1049 ,yes, just play with my example. as long as main has flex:1; it will use whole space left avalaible. if not enough, use overflow or let the page grow taller. http://codepen.io/anon/pen/yYGbdw – G-Cyrillus Nov 12 '15 at 23:39
  • Thank you mate this is great – Bill Nov 12 '15 at 23:52