Setting 100% height to columns in Twitter Bootstrap

Question

I am new to BootStrap so learning the ropes and understanding it. I am trying to acheive 100% height in column grid so that it covers 100% height of the page. Right now no height is set. When I try to specify the height of both columns col-lg-9 and col-lg-3 in pixels or % no change occurs. Don't know what might be the problem. Here is the basic structure I am using ```

"Top bar"

side bar

``` And here is the css for each item ``` @media (min-width: 1200px) .container { max-width: 1170px; } .row { margin-bottom: 20px; } .col-lg-9 { width: 75%; padding: 10px 20px; border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; -webkit-border-radius: 0 10px 10px 0; -o-border-radius: 0 10px 10px 0; border: 0 none; padding-top: 3%; min-height: 90%; } .col-lg-3 { width: 25%; background-color: #192D38; color: #88A7A9; min-height: 90%; } ```

Accepted Answer

try this:

```
html,body
{
  height: 100%;
}
```

If that doesn't work, then use inspect element, and verify that parent elements have 100% height. (Because if they don't - then child elements won't get 100% height unless they are `position:absolute` or `position:fixed`

Setting 100% height to columns in Twitter Bootstrap

Solution

Problem