Html 关于CSS问题

我的HTML和CSS如下所示：

<style>
    .header_div{
        background: none repeat scroll 0 0 #F3F3F3;
        border-bottom: 1px solid #D5D6D6;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.13);
        height: auto;
        left: 0;
        padding: 0;
        position: fixed;
        width: 100%;
        z-index: 50;
    }

    .content_div { width: 100%; }
</style>

<div class="header_div"></div>

.头分区{
背景：无重复滚动0 0#f3；
边框底部：1px实心#d5d6；
盒影：0 1px 6px rgba（0,0,0,0.13）；
高度：自动；
左：0；
填充：0；
位置：固定；
宽度：100%；
z指数：50；
}
.content_div{宽度：100%；}

---

问题：由于标题div的这个固定位置，一些内容div的位置在标题div后面。我不想对内容div应用边距来解决这个问题。因为这也会影响到其他页面设计。而页眉div位置是必须的。那么有没有其他的解决方案呢？

我甚至不确定我是否遵循了你的问题-举个例子会很好-但听起来你希望在某些页面上有一个固定的标题，但不想向下推你的内容，因为在没有固定标题的页面上这看起来很奇怪

在这种情况下，简单地将类名添加到带有foxed头的页面的内容包装器中，并对其应用边距，怎么样？像这样：

<div class="header_div"></div>
<div class="content_div fixed_header"></div>

或者，如果您的标记允许，则仅当content\u div是header\u div的一般同级时，才将其作为目标，如下所示：

.header_div ~ content_div { margin-top: 200px; }

---

你有不同的标题吗？所有页面的标题都是一样的，对吗？因此，所有内容，或者至少是一个div，包装除标题以外的所有内容，都可以有一个上边距将其向下推。为什么会有可能在标题上方的内容

<div class="header_div"></div>
<div class="contentWrapper">

...everything else in here

</div>

…这里还有什么

---

然后按下contentWrapper。这是正确的方法。

使用

填充

而不是

边距

样式。这是防止内容重叠的常用方法：

.content_div {
    width: 100%;
    padding-top: 20px; /*or whatever */
}

---

一般来说，人们认为固定div的样式应该是这样的，您希望您的内容超过固定div吗：O

.content_div {
    width: 100%;
    padding-top: 20px; /*or whatever */
}