Question

围绕这个主题有很多问题，但我发现这似乎对我有用。我有一个标题元素，我设置为position:absolute; height:100%，但是这个下面的内容落后于绝对元素。解决这个问题的最佳方法是什么？这是我的代码的简化版本：

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插件。去互联网找到插件并安装它。 Firefox比Chrome或任何其他浏览器更有效。

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

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

1 个答案: