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

使用垫片

您可以通过添加spacer元素作为容器的第一个子元素来推送container的内容。

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

<强> WORKING DEMO

使用顶部填充

您还可以使用padding-top容器来实现：

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

<强> WORKING DEMO

但是，如果要将容器的高度保持为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;
}

<强> WORKING DEMO

Answer 2

为什么不添加：

position:relative;
top:40px;

至.global_container {

Demo Fiddle

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

Answer 3

一个简单的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 4

您可以在.global_container或body

中添加padding-top

padding-top应与标题的高度相同。

Answer 5

我会这样做：

<强> http://jsfiddle.net/8eSAU/5/

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

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

Kolay gelsin：）

Answer 6

请在下面找到小提琴

的链接

将以下内容添加到global_container类

position:absolute;
top:47px;

<强> FIND FIDDLE HERE

标题div后面的Div位置

6 个答案:

使用垫片

使用顶部填充