Fixed page height with bootsprap

Question

I want to fix the height of the page, that page does not have scroll. I use bootstrap for create layouts. I have a two column with the same width. And when column have many content then this column should have a scrollbar.

And i use next css styles:

body {
  height: 100%;
}

#left {
  height: 100%;
  position: fixed;
}

#right {
  height: 100%;
  position: fixed;
}

jsfiddle

But this not have effect. How to achieve this?

Answer 1

First off, since this css will be common to both the left and right columns, it's worth giving them both a class (eg: .column).

You can use the max-height and overflow-y properties to achieve this:

.column {
  max-height: 100%;
  overflow-y: auto;
}

Answer 2

For that You can use the viewport measurement units in CSS3.

Viewport-Percentage

You can also refer to this example .

There is also an other example .

HTML

<div class="container-fluid wrapper">

  <div class="row-fluid columns content"> 

    <div class="span2 article-tree">
      navigation column
    </div>

    <div class="span10 content-area">
      content column 
    </div>
  </div>

  <div class="footer">
     footer content
  </div>
</div>

CSS

html, body {
    height: 100%;
}
.container-fluid {
    margin: 0 auto;
    height: 100%;
    padding: 20px 0;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.columns {
    background-color: #C9E6FF;
    height: 100%;   
}

.content-area, .article-tree{
    background: #bada55;
    overflow:auto;
    height: 100%;
}

.footer {
    background: red;
    height: 20px;
}

Here's the original post: Link