Overlapping dynamic fixed header - html

Question

My fixed header is overlapping my content.
Much like here (Position fixed content overlapping problem)
but my header is dynamic so not always 50px in height sometimes 52, 100 ...

Answer 1

Try to position it in your box better.
When you create a fixed element, it requires an exact position:
Example:
#header{
height: 95px;
width: 640px;
position: fixed;
top: 30px;
right: 30px;
}
So, this is how your browser will read this: I will place a fixed element in the top-right corner of the screen: 30 pixels from the top, and 30 pixels from the right of my screen.
THE REASON those fixed elements are one on top of another it's because he didn't define a top/bottom and left/right position correctly. Add more text and you will see if you can scroll on the fixed elements (you can't..).
Put everything in a div and ID'it #bigBody. Give the #bigBody an exact width and height, let's say 1000 width and 600 height.
Now add these:
#header {
height: 50px;
width: 600px;
position: fixed;
top: 30px;
right: 30px;
}
#footer {
background: #fff;
bottom: 0;
right: 0;
height: 30px;
width: 600px;
position: fixed;
}
min-width is irrelevant here... you use this only if you design big websites that require multiple devices access like iPhones, Tablets etc... if your just playing with the code just stick with the basics.

Answer 2

You can do that via JavaScript, updating both the size of the header and the margin of other widgets. See my fiddle for an example (with CoffeeScript, tested on Firefox and Chrome), or this other fiddle that uses jQuery. Basically it's changing the CSS together for more than one element.
header { height: value + "px"; }
.contents { margin-top: anotherValue + "px"; }
If the size change isn't done by JavaScript/CoffeeScript, you'll have to put a event listener to update the .contents CSS.