Question

我有以下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>

问题：由于头部div的这个固定位置，一些内容div的位置落在头部div之后。我不想将余量应用于内容div来解决这个问题。因为这也影响其他页面设计。并且标题div位置是强制性的。那么还有其他解决方案吗？

Answer 1

我甚至不确定我是否按照你的问题 - 一个例子会很好 - 但听起来你想在某些页面上想要一个固定的标题，但是不想把你的内容推下来，因为这看起来很奇怪在没有固定标题的页面上？

在这种情况下，如何简单地将一个类名添加到页面上的内容包装器上，并将其添加到foxed标头并对其应用保证金？像这样：

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

然后将其设为：

.fixed_header { margin-top: 200px; }

或者，如果你的标记允许，只有当它是header_div的一般兄弟时才定位content_div，如下所示：

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

Answer 2

你有不同的标题吗？所有页面上的标题都相同吗？因此，所有内容，或者至少包含除标题之外的所有内容的div都可以有一个顶部边距来推动它。为什么你的内容可以超过标题？

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

...everything else in here

</div>

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

Answer 3

使用padding代替margin样式。这是防止内容重叠的常用方法：

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

<强> FIDDLE

关于CSS问题

3 个答案: