CODEWITHSUNDEEP
css
Andrew
Andrew

Reputation: 6394

CSS: Extend div to fit the whole page

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

Upvotes: 2

Views: 21277

Answers (4)

Kyle
Kyle

Reputation: 67194

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/

Upvotes: 6

JGallardo
JGallardo

Reputation: 11373

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

enter image description here

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

enter image description here

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

enter image description here

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

Upvotes: 2

alexbusu
alexbusu

Reputation: 741

Use box-sizing: border-box; css property to avoid horizontal scroll bar display. Here is your updated example.

About box-sizing css property.

Upvotes: 0

feeela
feeela

Reputation: 29932

Try to add a height: 100%; for the HTML and BODY element:

html, body {
    height: 100%;
}

http://jsfiddle.net/BwVWx/3/

Upvotes: 1

Related Questions