html - 显示内容低于 100% 高度绝对 div

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

添加一个“填充”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 或任何其他浏览器相比，Firefox 更有效。

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