Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jonathan Musso
Jonathan Musso
3,760 Points

Best way for height to span full length of browser window?

Hi guys. Here is the code I am working with. If I want the height of #main to go from top to bottom, what is the best way to force it?

Also, what would you recommend for using a pixel width on #main and then percentages for the content?

    <div id="main">
        <h1>hardcoded</h1>
    </div>
    <div id="secondary">
      <h2>example heading</h2>
      <p>some paragraph</p>
    </div>
    <div id="tertiary">
      <h2>another example heading</h2>
      <p>and yet another example paragraph</p>
    </div>

UPDATED CSS

body {
    background: #fff;
    width: 100%;
    height: 100%;
}
#main {
    width: 25%;
    height: 100%;
    background: red;
    float: left;
    box-sizing: border-box;
}
#secondary {
    width: 37.5%;
    background: blue;
    float: left;
    box-sizing: border-box;
}
#tertiary {
    width: 37.5%;
    background: green;
    float: left;
    box-sizing: border-box;
}

3 Answers

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Jonathan,

Try this 

html{
height:100%;
}

This will make the html element to span the full height of the browser window. You can then set the height of the #main accordingly.

Jonathan Musso
Jonathan Musso
3,760 Points

Hugo, thank you!!! Why did we have to go one more level higher to achieve this? Thank you thank you!!

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

The percentage is calculated with respect to the height of the generated box's containing block.

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto.

A percentage height on the root element is relative to the initial containing block.

So in your case you are setting body height to 100%, which means it will have the full height of the top element (html), which is set to auto by default. This means that it will have the height relative to the content on the page.

Santos King
Santos King
2,214 Points
Santos King
Santos King
2,214 Points

Hello Jonathan,

If you want to force the height from top to bottom you should use:

'''

main {

height: 100%; }

'''

this will make it the full height of your parent element which I believe is the body.

you already have a width for #main, you could best stick with % or em's as this makes it easier to create different screen resolutions.

Hope this helped!

Santos,

Jonathan Musso
Jonathan Musso
3,760 Points

Hi Santos, thank you for your reply. Unfortunately I tried this earlier but it does not work.

Vittorio Somaschini
Vittorio Somaschini
33,371 Points
Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Hello Santos,

I am not a great css expert, but I think you should use height: 100% for all the main div, the body and the html. (Presuming your main div is inside the body tag.

Have you tried that?