Layout with fixed header and footer, fixed width sidebar and flexible content

Question

I\'m trying set up a layout that will look like this:

I want to use twitter bo

Answer 1

Now that Bootstrap 4 is out I thought some may benefit from this layout which is now a little easier thanks to flexbox.

Bootstrap 4 Demo

 

    

        Header
    
    

        Menu
    
    

        Main
    
 
 

    

        Footer
    
 


.grow {
    flex: 1;
    overflow: hidden;
}

.main,.side {
    overflow-y: auto;
    height:calc(100% - 55px);
}

.footer,.header {
    height: 55px;
}