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 ...
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments