html - 关于 CSS 问题

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

我什至不确定我是否理解你的问题 - 一个例子会很好 - 但听起来你想要在某些页面上使用固定标题但又不想将内容向下推，因为那样看起来很奇怪在没有固定标题的页面上？

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

<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; }