显示高度低于100%绝对值的内容

Question

围绕这个主题有很多问题，但我发现没有一个问题对我有效。我有一个header元素，我将其设置为position:absolute; height:100%，但是这个元素下的内容位于absolute元素之后。解决这个问题的最好方法是什么？下面是我的代码的简化版本：

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;
}

我尝试过的事情:使容器成为相对的：

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

向内容添加页边距：

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

添加一个'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%;
}

有没有什么建议我错在哪里，我应该尝试什么？

Answer 1

从CSS中删除position和overflow规则。

我建议你使用Firefox中的firebug插件。去互联网上找到插件并安装它。它在火狐上比Chrome或其他浏览器更有效。

在那之后，哪里出了问题。只需右键单击它，然后单击“使用firebug进行检查”。然后，您可以检查或添加新属性，并查看每个更改的影响。