HTML&CSS + Twitter Bootstrap: full page layout or height 100% - Npx

Question

I\'m trying to make following layout:

  +-------------------------------------------------+
  |       Header + search (Twitter navbar)          |
           


        

Answer 1

Is this what you are looking for? Here is a fiddle demo.

The layout is based on percentage, colors are for clarity. If the content column overflows, a scrollbar should appear.

body, html, .container-fluid {
  height: 100%;
}

.navbar {
  width:100%;
  background:yellow;
}

.article-tree {
  height:100%;
  width: 25%;
  float:left;
  background: pink;
}

.content-area {
  overflow: auto;
  height: 100%;
  background:orange;
}

.footer {
   background: red;
   width:100%;
   height: 20px;
}