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
Laurence Foley
16,695 PointsWhat is the best way to get the height of the main-header?
In the video after we set the main-header to position: fixed and top: 0. Guil then tells us the height of the main-header is 100px. I assume he got that height by inspecting the element in the console? After that we set the bodys top padding to 100px so the content below the main-header fits perfectly underneath it.
Now what if the height of the main-element changes when we resize the browser which will cause the content below to go back underneath the main-header. What is the best way to make sure the bodys top padding is always equal to main-headers height so that the content below the fixed element is never hidden?
8 Answers
Jacob Mishkin
23,117 Pointsthere are several ways to do this. I like using either em units (em) or percentages (%) they are generally the units to use if you want to make a website more fluid and responsive. you can also use a media query also and change the scale, but if you're using em or percentages it will scale with the width of the viewport. I hope this helps.
also i'm not a fan of using fixed positioning for most elements on a page unless it's absolutely necessary like a giant picture with animation or something, the goal now I think is to make websites a fluid as possible, and using absolute positioning make it tedious to do that. in the example guil shows you you can still have it fixed to either top or bottom, but use percentages or em's and it should scale with the viewport.
Laurence Foley
16,695 PointsSo you would find out the height of the fixed element and then convert it from px to em and use that value as the bodys top padding?
Jacob Mishkin
23,117 PointsLaurence, do you want to recreate the fixed header like in the video or is there something different?
Laurence Foley
16,695 PointsI wanted to make it more responsive. I guess I could just add a media query to adjust the bodys padding each time the header changes its height but I thought there might be an easier way of doing that.
Jacob Mishkin
23,117 PointsI gotcha, try it with percentages or ems first. are you having problems with the header coming too far in the the banner element? regardless media queries work. and i take it no jquery on this project?
Laurence Foley
16,695 PointsYea exactly. I guess for the most part it wouldn't be to much hassle using media queries if you had to. I was thinking that say you had a lot of text inside the fixed element and say the browser window got smaller causing the text to wrap you would have to right a media query each time the text wrapped around but then again you wouldn't really come across that often in a sticky nav.
Jacob Mishkin
23,117 Pointsyeah, is that what you are trying to do, create a sticky nav situation? or is this just to enhance CSS skills? a great place to test simple stuff like is is:
its a good spot if you don't know it already.
Laurence Foley
16,695 PointsYea its just for me to know how :) . I did initially think that you could maybe use JavaScript to get the elements height and the set the body top padding to that height but on second thoughts I'm not sure if that would be practical or a bad practice.
Jacob Mishkin
23,117 Pointsyeah, to be honest i like keeping the body's padding and margins at 0, and then creating a wrapper div around elements to style them. I don't know if it's bad practice or not though. I'm sure stackoverflow has something to say about it. If you want mess around with it. but to answer your question media query and using percentages and em units will make the page fluid. as fat as if the header goes into any other elements think about floating it and then clearing the next element. that might keep together, but its something to experiment with. But the easy way is to use jquery and use absolute and relative positioning with a high z-index. I'll take a look at it later tonight or tomorrow and let you know what i find. Its an interesting questions.
Laurence Foley
16,695 Pointshttp://codepen.io/anon/pen/rVYabw
Here is an example of what I was having a problem with. On a small screen it looks fine but as the heading gets bigger the bodys padding has to be adjusted again.
Jacob Mishkin
23,117 Pointsgotcha! i'll fool around with it. let you know if I find anything.
Laurence Foley
16,695 PointsCool. Thanks for the help :)
Jacob Mishkin
23,117 Pointsof course man, anytime!
Jacob Mishkin
23,117 PointsI will probably get to it tomorrow just so you know.