Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Techniques Positioning Schemes Fixed Positioning

What 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

there 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.

So 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?

Laurence, do you want to recreate the fixed header like in the video or is there something different?

I 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.

I 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?

Yea 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.

yeah, 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:

www.codepen.io

its a good spot if you don't know it already.

Yea 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.

yeah, 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.

http://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.

gotcha! i'll fool around with it. let you know if I find anything.

Cool. Thanks for the help :)

of course man, anytime!

I will probably get to it tomorrow just so you know.