Title: Make div 100% height
Last modified: August 19, 2016

---

# Make div 100% height

 *  [HorrorUK](https://wordpress.org/support/users/horroruk/)
 * (@horroruk)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/make-div-100-height/)
 * I’m trying to figure out how to make a section of code reach the full height 
   of the site.
 * It is probably easier to take a look at the page to see what I mean.
 * [http://ioaf.moonworks.co/video](http://ioaf.moonworks.co/video)
 * I want the middle white section to go all the way down, so it is white down to
   the footer, but can’t seem to do it as it just goes down as far as there is content.
 * Thanks

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/make-div-100-height/#post-2041106)
 * The short answer is, the way you want to do it, you can’t. It’s not how CSS works.
   There are some workarounds but they don’t work consistently in all browsers.
 * To accomplish what you want the way its typically done is to fake the appearance
   of white in the center going all the way to the bottom using a technique called
   faux columns. You use a background image to accomplish this.
 * There is a div in your theme with the id of “wrapper”. You make a special image
   and set it as the background image on the wrapper div. The image can be 10 or
   even 1 pixel tall. it should be 770 pixels wide, for your site.
 * The left 230 pixels (the width of your left column) should be made the blue background
   color, #b9e6fe
 * The right 540 pixels are white.
 * That is the total width of 770 pixels.
 * Upload the image into your theme’s image folder. You can’t use the media library
   uploader for that purpose since it puts it in the wrong folder.
 * let’s say you named the image faux.jpg
 * Find this on line 32 of your theme’s stylesheet style.css
 *     ```
       #wrapper {
           background: none;
           min-height: 100%;
           width: 1000px;
       }
       ```
   
 * change the background line to this:
    `background: url(images/faux.jpg) repeat-
   y top left;`
 * That should display the white background color down to the bottom of the content
   section.
 *  Your center column is 540 pixels wide – that is the part that is white.
 * Your left column is 230 pixels wide.
 *  Thread Starter [HorrorUK](https://wordpress.org/support/users/horroruk/)
 * (@horroruk)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/make-div-100-height/#post-2041132)
 * Thankyou, that did the job perfectly and has saved me another 5 hours trying 
   to figure it out.
 * It’s amazing how such simple solutions exist – once you know what they are 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Make div 100% height’ is closed to new replies.

 * 2 replies
 * 2 participants
 * Last reply from: [HorrorUK](https://wordpress.org/support/users/horroruk/)
 * Last activity: [15 years, 2 months ago](https://wordpress.org/support/topic/make-div-100-height/#post-2041132)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics