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
Zachary grace
6,682 PointsMake menu bar stretch the length of the page
Hi. I'm trying to make my navigation bar run the entire way down the left hand side of the page. The bar only contains 4 or 5 links, but I want it to stretch down as far as the main content to fill the height of the page. I've tried the min-height=100%, but since the content within the navbar has already been covered, the bar only stretches as long as the height of the browser. then stops. Any suggestions?
2 Answers
Paul Yabsley
46,713 PointsIt is a classic problem. This article outlines a number of different methods for achieving what you want: http://css-tricks.com/fluid-width-equal-height-columns/
There is this article too which is good: http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403
This is a neat way of doing it using a background gradient on the parent element: http://codepen.io/chriscoyier/pen/fHowu?editors=110
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsSetting the height of an element to 100% will make it fill the height of it's parent element. If the body's height isn't set, then it will only grow as it needs to fit the content. In order to have an element fill the height of the page, not only do you need to make sure it's height is set to 100%, you also need to make sure all of it's parent elements - including the body and html elements - are also filling the full height of the page.
So, at a minimum I would say include something like this:
html, body /*, any other parent elements of your nav bar */ {
height: 100%;
}
Zachary grace
6,682 PointsHmmm. Great suggestion, but it didn't seem to change anything.
Paul Yabsley
46,713 PointsPaul Yabsley
46,713 PointsI made a little demo of the Nicolas Gallagher method: http://codepen.io/paulyabsley/pen/sgtDw
Zachary grace
6,682 PointsZachary grace
6,682 PointsHey Paul, I checked out the codepen demo. So I can see how that would work if your .wrapper stays the same height on each page (.wrapper:500px; in the example), however when I have multiple pages that are all different height sizes that doesn't work so well. What I need for the nav to do is to stretch down as far as the main content to fill the height of each page. I'll make a little demo of the existing code so you can see what i'm doing and maybe point out the flaws.
http://codepen.io/anon/pen/auslp
Paul Yabsley
46,713 PointsPaul Yabsley
46,713 PointsHi Zachary, the height was only to give some length to the columns and demonstrate that they would stretch to the full height. I created a new demo without any height on the wrapper to show it can be achieved: http://codepen.io/paulyabsley/pen/FJvEz
There is a bit more going on because it is using the before pseudo element to place faux columns behind the content. If you are struggling with the concept, try the second article I posted above. It explains it well.
In terms of your demo it is difficult to say whats best because you are positioning elements on the page in different ways. Your nav column is floated left and your content column seems to be centered using margins. I suspect you are viewing it at a fairly small width because when the browser is wider your nav column remains attached to the left side of the screen sitting on the white background. I actually think that looks ok. On smaller widths the nav is on top of the content column which I'm guessing is why you want its background to be full height. I don't know how you would achieve that with your current layout. Perhaps one of the teachers could help?