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 Zachary grace
Zachary grace
6,682 Points

css sizing issues

How do I adjust the styling for each page when each page is a different size? Like if I have a vertical nav bar on the side of the page and I want the background color to continue down the whole page instead of having to put the height: 2100px; for example and then height:1500px; on another page?

4 Answers

notf0und
notf0und
11,940 Points

My official answer:

html, body {
    height: 100%;
}

nav {
    height: 100%;
    float: left;
}

This is if your nav is a child of only the body element. If it's inside a div, you must also set that div class/id to height: 100%;. I'm also assuming you'll be floating it left so the rest of the document wraps around it.

Hope this works for you!

notf0und
notf0und
11,940 Points
notf0und
notf0und
11,940 Points

Deleted cause I believe I was wrong :$ Sorry Zachary, I'm still looking for the correct way to do this.

Zachary grace
Zachary grace
6,682 Points

Ok thanks. What if I want it to extend from just under my Header? So if my header's height is 174px and I want the nav bar to go from the bottom of the header to the rest of the page and each page is a different size? Is there a value I can set to the height property that will automatically fill the rest of the page regardless of the size?

Zachary grace
Zachary grace
6,682 Points
Zachary grace
Zachary grace
6,682 Points

Ok thanks. What if I want it to extend from just under my Header? So if my header's height is 174px and I want the nav bar to go from the bottom of the header to the rest of the page and each page is a different size? Is there a value I can set to the height property that will automatically fill the rest of the page regardless of the size?

notf0und
notf0und
11,940 Points

If the nav is under the header in the HTML, it will start from there by default.

Victor Rodriguez
Victor Rodriguez
15,015 Points
Victor Rodriguez
Victor Rodriguez
15,015 Points

CSS sizing also works with percentages. Say you have a div. height="50%" width="10%". this is especially helpful with background colors. just remember that sometimes it is helpful to include html, body{margin:0; padding: 0;} so your background doesn't end up with a weird white border. if you want to control how things display on a page as far as positioning, use the 'position: relative' or 'position: absolute'. then you can use top, left, bottom, right, and specify in px, em, or % distancing.