使用固定标头时出现问题

Here is my working code on http://jsfiddle.net/cpmb9nmj/

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

I am using fixed header with height of 130px, i set the wrapper padding at top for 130px.

我使用高度为130px的固定标题,我将顶部的包装填充设置为130px。

But when i click the links 130px of the div tags are hidden behind the header.

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

How to fix this padding issue.

如何解决这个填充问题。

Header:

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

Body:

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

Style:

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

1 个解决方案

#1

How about adding padding-top for each targeted div, and removing the padding of the wrapper?

如何为每个目标div添加padding-top,并删除包装器的填充?

Like this DEMO

喜欢这个DEMO

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

#1