3 rows, 100% height layout, with flexbox

Question

I'd like to know: is it possible to build a 3 rows layout, 100% height, with flexbox?

<header> The header content goes here. </header>
<div class="content"> The main content goes here. </div>
<footer> The footer content goes here. </footer>

fixed-height header and footer, while content the liquid part.

I mean, something like this but without absolute positioning:

* {
  margin: 0;
}
header {
  position: absolute;
  width: 100%;
  height: 64px;
  top: 0;
  background: red;
}
footer {
  position: absolute;
  width: 100%;
  height: 64px;
  bottom: 0;
  background: green;
}
.content {
  position: absolute;
  width: 100%;
  top: 64px;
  bottom: 64px;
  background: blue;
}

<header>The header content goes here.</header>

<div class="content">The main content goes here.</div>

<footer>The footer content goes here.</footer>

http://jsfiddle.net/BMxzn/

Something like [this](http://jsfiddle.net/DomeTune/5qqw1kzy/1/) — DomeTune, Jan 16 '17 at 15:28
@Michael_B Ok thank you, I added my own answer along with proper docs. — Luca Reghellin, Jan 27 '17 at 13:08

score 12 · Answer 1 · answered Jan 16 '17 at 15:25

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.content {
  flex: 1;     /* this is the key; consumes all available height */
  background: blue;
}
header {
  height: 64px;
  background: red;
}
footer {
  height: 64px;
  background: green;
}
* {
  margin: 0;
}

<header>The header content goes here.</header>
<div class="content">The main content goes here.</div>
<footer>The footer content goes here.</footer>

Luca Reghellin · Accepted Answer · 2017-01-27T13:11:26.330

I add my own accepted answer here, because it addresses other issues as well.

I noted that the usually suggested code has a problem with Android prior to 4.4.4. By better indagating > this and > this I found out that the problem is > this, even if Android is not mentioned on the affected browsers list. So, my solution was to add flex-shrink: 0 to the content:

body{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-content{
  flex: 1 0 auto; // flex-shrink:0 > android 4.4.2 fix (and some other browsers too)
}

It's also good to assign some kind of flex property to header and footer. I noticed on Android 442 that otherwise the bg color was gone:

.main-header,
.main-footer{
    flex: none; // or flex something.
}

Also please note that I'm using Autoprefixer. Otherwise, you should not use the shortcut on main-content (IE shit-fix):

.main-content{
  flex-grow: 1;
  flex-shrink:0;
  flex-basis:auto;
}

score 1 · Answer 3 · edited May 23 '17 at 11:53

1

Very similar to these question : this & this

You need only 3 lines of code:

display:flex;
flex-flow:column;
height:/* whatever height needed */

and then flex:1; to the container that needs to fill remaining space

* {
  margin: 0;
}
body {
  display: flex;
  flex-flow: column;
  height: 100vh;/* if you relay on flex, then vh is also understood */
}
body>* {
  padding: 1em;
}
header {
  background: red;
}
footer {
  background: green;
}
.content {
  flex: 1;
  background: blue;
  color: white;
  /* optionnal if you want to keep footer at screen 
  overflow:auto; */
}

<header>The header <b>of any height</b> content goes here.</header>

<div class="content">The main content goes here.</div>

<footer>The footer <b>of any height</b> content goes here.</footer>

there is no need to set heights to footer or header , but you might add overflow:auto to the main container.

edited May 23 '17 at 11:53

Community

1
1

answered Jan 16 '17 at 15:49

G-Cyrillus

101,410
14
105
129

@Stratboy , was it specified in the question ? is it also fine with IE ? :) Can you feed me back about this in android https://jsfiddle.net/10ohr6wy/9/ (flex:1 1 auto;) needed by IE – G-Cyrillus Jan 26 '17 at 19:04
since the question was blocked I coudn't add an answer by myself thus I created another question. Anyway, my answer on the other thread is better because it addresses android issues. It's all documentated on the external links I posted with the answer, so you can refer to those. wrote the comment above only to inform future people, so nothing personal. Have a nice day. – Luca Reghellin Jan 27 '17 at 13:03
@Stratboy , okay, i did not see that other question where android was involved :) . Did you give a look at the fiddle i linked earlier about how it behaved in android (about another question here on overflow, i was just wondering if the IE fix was also fine for android ... or buggy) – G-Cyrillus Jan 27 '17 at 18:56
Mmm I don't understand really much sorry. But anyway, the android fix seems to be the same as the IE's one. – Luca Reghellin Jan 30 '17 at 20:30

3 rows, 100% height layout, with flexbox

3 Answers3

Linked