Fixed Header With Dynamic Height

This is purely a conceptual question for the time being.

I was wondering whether it is possible to create a fixed header where the header (think navigation) always sticks to the top of a page but has a variable height dependent on various other things happening on the page. Normally I could just position the header as fixed and give it a static height. Than place a top margin equal to the header height on the page content so the page content is always below fixed header. However, when the headers height changes this becomes more complex requiring JavaScript to adjust the page contents top margin dynamically when the fixed header changes. Is there any way to accomplish this without using JavaScript in Chrome, IE9+, Safari, and Firefox?

I usually think of the height of a box being determined by its contents. It sounds like you are saying that the height of the header might be influenced by other content not within the header box, is that correct? If so, could you please describe how this might happen? What “outside influence” might affect the height of the header?

Well in this particular case there are two separate scenarios so far. One scenario is clicking on the primary nav item and displaying a secondary nav below the primary one. The second scenario is clicking on a login link and displaying a login form.

OK, both of these examples involve changes taking place from within the header box.

Conceptually speaking, both are temporary items and both could happen without changing the height of the header box. Drop down menus don’t typically require additional space. The drop down usually overlays whatever content may follow. Same for the login form; however the login form will most likely require JavaScript and/or PHP to execute and process.

Both the login form and drop down are included in the the header. So I assume there is no way to do this with pure css.


This is the problem with fixed elements where you need then to react with other content and they can’t. It’s the same problem with a fluid width fixed header and the content wraps on smaller windows and thus overlap the normal page contents. You can set media queries to increase the height at various widths but is a hit and miss affair.

In most cases you are only concerned when the page first loads so perhaps the JS sticky header approach is better in these cases where the header only becomes fixed once the page is scrolled.