关于CSS问题

我有HTML和CSS这样如下：关于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这背后的固定位置。我不想将margin应用于内容div来解决此问题。因为这也会影响其他页面设计。并且头部div位置是强制性的。那么是否有其他解决方案？

来源

2013-05-18 badal

一般人认为应该是这样固定的div应的风格，你想你的内容来投奔您的固定格：O型 –

我甚至不知道如果我按照你的问题 - 一个例子会一直不错 - 但它听起来像你想在一些网页上一个固定的头，但不希望向下推，你的内容，因为这看起来在没有固定标题的页面上奇怪？

在这种情况下，如何简单地向页面上的内容包装添加一个类名称，并在页面上添加一个带有边框的页眉并对其应用边距？就像这样：

<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-18 07:02:39

你有不同的头文件吗？所有页面上的标题都是相同的？所以所有的内容，或者至少包含一个除了标题之外的所有内容都可以有一个顶部边缘来压低它。为什么你会有可能超过标题？

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

...everything else in here 

</div>

然后推送contentWrapper下来。这是做到这一点的正确方法。

来源

2013-05-18 07:03:25

使用padding，而不是margin造型。这是为了防止重叠内容的常见方式：

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

FIDDLE

来源

2013-05-18 07:03:41

回答

相关问题