Absolutely positioned element moved by margin of another element
- by user1505528
Here is my jsFiddle for the following question: http://jsfiddle.net/arelia/Rruxf/
I'd like to have a header that stays at the very top of the body and a footer that stays at the very bottom of the body. I have a content div (position: relative) between the header and footer, and when I set a margin around the div my absolutely positioned header and footer move from their top/bottom positions by the height of that margin (this also happened when I tried setting a margin above and below the paragraphs in the div). In the fiddle you can see that the footer is not attached to the bottom even though it's absolutely positioned (I went ahead and made the header static since static gives the intended result). How do I position the header and footer to the top and bottom of the body and not have the content in the middle move those two elements? If the position: absolute elements are moved out of the flow why would anything affect their position at all?
I've tried searching here and Google for "CSS margin affects absolute" and a few other phrases to no avail. I discovered this while playing around with it some more in developer tools:
Metrics show the body is the height of the html element minus the amount of one margin (the margin that's still affecting the footer). So, the body must be stretching to the height of the content div since there is nothing else within the document flow within the body to define its height. But that height ends where the content ends instead of after the margin. Shouldn't it include the margin?
If I make the height of the body 100%, the footer positions
itself to the bottom of the viewport and then stays fixed in that
spot when I scroll. Why isn't it attaching itself to the bottom of
the body instead of the bottom of the viewport?
