使用固定标头时的定位问题答案

【问题标题】：Postioning issues while using fixed header使用固定标头时的定位问题
【发布时间】：2014-10-01 03:59:33
【问题描述】：

这是我在http://jsfiddle.net/cpmb9nmj/ 上的工作代码

我使用高度为 130 像素的固定标题，我将顶部的包装器填充设置为 130 像素。

但是当我点击链接时 130px 的 div 标签隐藏在标题后面。

如何解决此填充问题。

标题：

<header class="header">
<nav class="nav">
    <ul>
        <li><a href="#promoo">HOME</a>
        </li>
        <li><a href="#about">ABOUT</a>
        </li>
        <li>TEAM</li>
        <li>SERVICES</li>
    </ul>
</nav>

主体：

<div class="wrapper">

     <div id="promoo">
     <h2> TOP CONTENT </h2>
     <h2> BOTTOM CONTENT </h2>
     </div>

     <div id="about">
     <h2> TOP CONTENT </h2>
     <h2> BOTTOM CONTENT </h2>        
     </div>

</div>

风格：

  body {
margin:0;
}
.wrapper {
width:100%;
position:absolute;
padding-top:110px;
}
.nav {
float:right;
 }
.nav ul {
list-style-type: none;
margin-top: 58px;
margin-right:35px;
 }
.nav ul > li {
display: inline;
padding: 10px;
font-size: 19px;
font-weight: normal;
}
  .header {
height:130px;
width:100%;
margin-top:-3px;
margin:0px auto 0px auto;
overflow:hidden;
top:0px;
z-index:1;
position:fixed;
background:#BF0CC9;
}

【问题讨论】：

标签： html css position

【解决方案1】：

如何为每个目标div 添加padding-top，并删除包装器的padding？

点赞DEMO

.wrapper > div {
    padding-top: 130px;
}

【讨论】：