显示低于100％高度绝对div的内容

Question

There are lots of questions around this subject but non i've found that seem to work for me. I have a header element that i set to position:absolute; height:100% position:absolute; height:100% , however the content under this goes behind the absolute element. What's the best way to solve this issue? here's simplified version of my code:

html:

<div class="container">
    <header></header>
    <div class="content"></div>
</div>

css:

header {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    float: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

things i've tried: making the container relative:

/** this still covers the div below and appears to make no difference **/
.container { 
    height: 100%;
    width: 100%
    position: relative;
}

adding margin to the content:

/**works for one screen-size but not responsive obviously **/
.content {
    margin-top: 200px;
}

adding a 'filler' div html:

<div class="container">
    <header></header>
    <!-- also tried putting the spacer into the header with no results -->
    <div class="spacer"></div>
    <div class="content"></div>
</div>

css:

.spacer {
    height:100%;
    /* also tried min-height: 100%;
}

any suggestions where i am going wrong, and what i should try?

Answer 1

Remove the position and overflow rules from your CSS.

---

I recommend you use the firebug plugin in Firefox. Go to internet and find the plugin and install it. It's more effective with Firefox more than Chrome or any other browsers.

After that where ever something went wrong. Just right click on that and click "inspect with firebug". Then you can inspect or add new attributes and see the impact of each change.