Learn how to a build a cloud-first strategyRegister Now


CSS, make inner div take the entire hight

Posted on 2008-11-18
Medium Priority
Last Modified: 2013-11-19
I have relatively new to div only design and was wondering how I can setup my css to have the inner div take the entire height the screen. I have the following basic div structure
<div class="wrapper">
<div id="header">.....
<div id="content>....
<div id="footer">......

My content does not have a height specified and has the following css property:

#content {
      margin: 0 auto; /*to bring it to the center of the page */
      background:  url(images/img10.gif) repeat-y;

However, when I expand my page in the browser the gradient or image with repeat-y doesn't come all th way down to up to the footer in safari and in IE it continues all the way dows to the footer. take a look at the attached image and see the inner gradient doesn't go all the way down when I expand my page.

Question by:ucsdmbdm
LVL 15

Expert Comment

ID: 22986626
I think this link has what you are looking for.


Expert Comment

ID: 22989531
Without seeing the rest of your css, I'm geussing you have'nt floated anything, if you did the footer would sit just under the content, without the huge gap.

Make sure you use floats. The only way to make your content fill the entire page is to either fill it with contnent, or set a height. After all how does it now how much of your bg to repeat withouth a height set n your container.

Add flost left to all your classes except your class with the margin auto.  You will see how it is supposed to look and you can work from there, get the css correct first.
LVL 44

Accepted Solution

scrathcyboy earned 1500 total points
ID: 23000881
For the inner DIV to take the entire height, you have to make all the container DIVs to the entire height.  SO you start at the top and work down --

HTML, BODY  { height:100%; min-height:100% }

DIV.main  { height:100%; min-height:100% }

DIV.inner  { height:100%; min-height:100% }

Now your inner DIV can do it, as long as the HTML, BODY and main page DIV also has this property.

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question