Adding elements after fixed header

问题:

I have a fixed header at the top of the screen, and if I try to put an element after the header, said element ends up ignoring the height of the header.

HTML

<header></header>
<p>Empty text</p>

CSS

header {
    display: block;
    height: 100px;
    width: 100%;
    background: #eee;
    position: fixed;
    top: 0;
    z-index: 100;
}

JSFIDDLE

I've searched on StackOverflow and other places for solutions to problems similar to this but with no avail (in part due to me having a hard time verbalizing the specific problem). I tried a clearfix,

<header></header>
<div style="clear:both"></div>
<p>Empty text</p>

But that still doesn't work. I also tried adding a margin-top: 100px to the p element, but I consider that bad practice in the case of me changing the height of the header in the future, and also having to do this for every single element following the header or any other element I might add a position: fixed or position: absolute. Additionally, the header will be a fluid height according to different sized screens.

Right now I'm wireframing so I'd really rather not use JavaScript, just plain CSS, if that's possible. If it's not, minimal vanilla javascript will do. This is a fundamental web design problem and I've always countered it with margin-top but I'm wondering if anyone knows of a cleaner, better way to counter it.

Also, this needs to be at least somewhat cross-browser. Again, only wireframing. My wireframes should be able to work on anything that supports basic CSS.

Sorry if this is a duplicate question, I'm sure it is, but I couldn't find anything that quite matches my situation. Any help is much appreciated!

回答1:

http://jsfiddle.net/09qL0nzv/3/

var p = document.getElementsByTagName("p")[0],
    header = document.getElementsByTagName("header")[0],
    h = window.getComputedStyle(header).getPropertyValue("height");

p.style.marginTop=h;

This will set a margin-top to the paragraph equal to the height of fixed header. However, this does not take padding or border into account. There are two possible solutions for this.

Use box-sizing: border-box on the header. This will make sure that the height, including padding and a border, will be the height as defined in the stylesheet. (I highly recommend using border-box on all your elements, like so: *, *:before, *:after {-moz-box-sizing:border-box;box-sizing: border-box;}.)

Another solution is adding the padding and border to the computed value in JavaScript, and include that value in the margin top that you set to p. I don't like this solution, but it works.

回答2:

When you fix the header, any other element you place disregards its very existence.

Only workaround I've seen is to give a padding (or margin). But, from what I understood you need a more dynamic soln. In which case your best solution would be to use client-side scripting say jquery/js to determine elements present height and then add the same as padding for elements below.

回答3:

It's the position:fixed that causes the problem here. The header is no longer part of the flow content, so the flow content begins at the top of the page.

There is no ideal solution for this, but an option that might be a little better than changing the <p> margin is to add an empty <div> to the beginning of your content that matches the height of the <header>.

Here's an example JSFiddle:

回答4:

For a more dynamic solution, this is what I came up with

$('p').css('margin-top', $('header').outerHeight());
$(window).resize(function() {
  $('p').css('margin-top', $('header').outerHeight());
});

There might be a better way of doing this, but my reasoning was setting the initial margin of the p tag to be the outer height of the entire header, and then whenever the header might change (in this case, that would be when the window is resized), the margin is then re-evaluated on the p tag.