0

我有下面这样的 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 位置是强制性的。那么有没有替代的解决方案？

4

3 回答 3

0

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

在这种情况下，如何简单地将一个类名添加到具有固定标题的页面上的内容包装器并对其应用边距？像这样：

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

然后使用以下样式对其进行样式设置：

.fixed_header { margin-top: 200px; }

或者，如果您的标记允许，则仅当 content_div 是 header_div 的一般同级时才定位它，如下所示：

.header_div ~ content_div { margin-top: 200px; }
于 2013-05-18T07:02:39.447 回答
0

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

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

...everything else in here

</div>

然后将 contentWrapper 向下推。这是正确的方法。

于 2013-05-18T07:03:25.550 回答
0

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

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

小提琴

于 2013-05-18T07:03:41.923 回答