标题 div 后面的 div 位置

Question

大家好，我的教程现在有一个树div。页眉，容器和页脚。标头是固定的。但是如果你在 JSFiddle 中检查它，你会看到容器div 有一个问题滞后于标题div 我无法解决问题。我可以在我的 CSS 代码中做什么？

这是 HTML 代码：

<div class="globalHeader">
    <div class="globalheader-in"></div>
</div>
    <div class="global_container">
    <div class="container">
        1 <br>2 <br>3 <br>4 <br>5 <br>
    </div>
</div>

和CSS代码：

.global_container {
    clear:both;
    width:981px;
    height: auto;
    margin-left:auto;
    margin-right:auto;
    border-right:1px solid #d8dbdf;
    overflow:hidden;
    background-color:#f8f8f8;
}
.container {
    float:left;
    width:981px;
    height:100px;
    background-color:red;
}
.globalHeader {
    width:100%;
    height:40px;
    position:fixed;
    background-color:#2a3542;
    z-index:99999;
}
.globalheader-in {
    width:981px;
    height:40px;
    margin-left:auto;
    margin-right:auto;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
}

Answer 1

使用垫片

可以通过添加分隔符元素作为容器的第一个子元素来向下推送container的内容。

.container:before {
    content: ' ';
    display: block;
    height: 40px;  /* equal to the height of the header */
}

工作演示。

使用顶部填充

您还可以使用容器的padding-top来实现这一点：

.container {
    width:981px;
    height:100px;
    /* other styles... */
    padding-top: 40px;
}

工作演示。

但是，如果要将容器的高度保持为100px，则应使用box-sizing: border-box来计算容器的高度，包括填充和边框，如下所示：

.container {
    width:981px;
    height:100px;
    padding-top: 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

工作演示

Answer 2

我会这样做：

http://jsfiddle.net/8eSAU/5/

.global_container{
    clear:both;
    position: relative;
    top: 40px;
}

它不起作用，因为您只是将文本隐藏在固定元素下方。

科莱凝胶素:)

Answer 3

为什么不添加：

position:relative;
top:40px;

到.global_container {

演示小提琴

这假设您希望标题与内容一起滚动，在这种情况下，您需要做的就是将内容的顶部偏移标题的高度，因此它最初显示在标题下方。

Answer 4

一个简单的padding-top就可以解决这个问题。

JSFiddle

.global_container{
    clear:both;
    width:981px;
    height: auto;
    margin-left:auto;
    margin-right:auto;
    border-right:1px solid #d8dbdf;
    overflow:hidden;
    background-color:#f8f8f8;
        padding-top:40px; /* heigt of fixed header */
    }

Answer 5

您可以在

.global_container或正文中添加填充顶部

填充顶部应与标题的高度相同。

Answer 6

请在下面找到小提琴的链接

将以下内容添加到global_container类

position:absolute;
top:47px;

在这里找到小提琴