CSS: Extend div to fit the whole page

Question

I am trying to find a way to extend a div to fit the rest of the page, without using JavaScript.

Some code I written to start with:

HTML:

​<div class="bodyContainer">
    <div class="sidebar"></div>
    <div class="container"></div>
</div>  

CSS:

.bodyContainer {
 border: 1px solid black;
 width: 100%;
 min-height: 50px; 
 height: 100%;    
}

.sidebar {
    height: 100%;
}

.container {
    height: 100%;
}

The code above doesn't extend the div to fit the rest of the page.

​I also started a JSFiddle to see what happens. Link: JSFiddle

Answer 1

You need to add the height and width to the html and body elements also:

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

http://jsfiddle.net/Kyle_/BwVWx/4/

Answer 2

The answers above have correct information but I am adding some gaps in information for those that are new to CSS.

If you just add a class and try to make your div 100%, you will get this

So you have to add 100% to the height of the body and html

You will still have "white space" around the div. So remove padding and margins.

CSS

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* your class for the div should have 100% height and width */
.bg-full {
  background-color: #777; /* you can add a color to visually test your code */
  width: 100%;
  height: 100%;
}

You can view a demo on CodePen