Building Stretching to the bottom Layout With Flex-Box

Layout

Everybody knows that to build the layout is complicate thing, especially when we talking about layout which should stretch to page bottom. In other words - with footer sticking to page bottom.

I'm sure there is a lot of ways around how to build this layout, but in this article i will try to show how to build it using flex-box CSS3 feature

Dividing to sections

First lets decide to how to divide our layouts to sections:
I decided that two main sections will be displayed one besides other like to columns - nav and main elements
Inside main element will be 3 other sections positioned one above the other:header,article and footer

    <div class="wrap">
      <nav>
        <ul>
          <li><a href>1 link</a></li>
          <li><a href>2 link</a></li>
          <li><a href>3 link</a></li>
        </ul>
      </nav>
      <main>
         <header>Hello Plunker!</header>
         <article>
           HellHePlunkllo Plunker! Plunk
           Hello Plunker!Hello P Plunk
           lunker Plunk!o PHello Plunker Plunk
           !lunker! Hello Plunker! Plunk
         </article>
         <footer>footer</footer>
      </main>
    </div>

VH Trick

One css feature i found very useful is VH unit. This vh represents percents of view height (e.g. browser window height) ,and thus given some element height set to 100vh makes it to stretch over the whole window from its top to its bottom

.wrap{/* root container */
  height:100vh;
  background:green;
  display:flex;
}

Nav & Main sections flow

Since we want those sections to be stick one near other (like two cells in the row) all we have to do is set the display property of their container to flex
By default flex-direction property is "row"
Since nav section has fixed width of 234px - all that left to do is to make the main section to catch all the remaining space:

nav{
  width:234px;
  background:orange;
}
main{
  flex:1   100%;/*will make it stretch over remaining space*/
}

Header Article and Footer

First thing is to set flow of main container to be column

main{
  display:flex;
  flex:1   100%;
  flex-direction:column;
}

Now the only thing left is to arrange the header above the article and make article to catch all available space between header and footer.

article{
  flex:1   100%;
  background:red;
}

See this plunker for running code

Flex Box And Prejudice

I don't know why some people have some superstitious feelings about using flex box css property. In this article I will try to convince you that using flex will make your life(as html programmer) much easier.
First of all i must recommend this great article that also supplies this great playground
For getting things easy to understand - I will start straight with some example:
lets say you need to build a page with following layout:
You have 2 groups of buttons - the one group should stick to the left and other one - should stick to the right. I want to show you two different ways to implement this layout:
HTML:

    
    <nav>
       <div class="left-menu">
          <button class="fa fa-refresh"></button>
          <button>Provisioning Events</button>
        </div>
        
       <div class="right-menu">
          <button>butt1</button>
          <button>butt2</button>
          <button>butt3</button>          
        </div>>         
    </nav>

CSS
1. using the "justify-content:space-between" css feature:

nav{
   display:flex; 
   justify-content:space-between;
}

2. using "flex:1" rule on style of .right-menu

nav{
   display:flex; 
}
.right-menu{
  flex:1;
  display:flex; 
  justify-content:flex-end;
}

What is "flex:1"?

"flex:1" shorthand for the flex-grow, flex-shrink and flex-basis properties, in our case means that .right-menu should capture all available space at the right of .left-menu.
Hope now you can see that flex-box feature has more various options to play with (more flexible after its name)...

One More Example

How to make footer to stick to bottom of the parent element? Lets say you have some kind of dialog with content and footer (which suppose to stick to the floor), and content need to "catch" all the remaining space?

   <div class="modal">
       <form>
         <main>
           content content content
           <br/>
           
           <div style="display:none;color:red" id="koko">
              something different here...
           </div>
         </main>
         <footer> 
           <button>footer</button>
         </footer>
       </form>
   </div>

So, Flex-Box can be helpful again:

.modal form{
  display:flex;
  flex-direction:column;
  height:230px;
  width:240px; 
  background:red;
  color:#fff;
}
main{  
  background:blue;
  flex:1;
}
#koko{
  height:170px;
  background:#fff;
}
footer{
  padding:5px;
}

JS Bin on jsbin.com