2014-10-01 67 views
0

這是我工作的代碼上http://jsfiddle.net/cpmb9nmj/
Postioning問題,同時使用固定頭

我使用固定頭與130px高度,我設置在頂部的包裝填充爲130px。

但是,當我點擊鏈接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; 
} 

回答

0

如何添加padding-top爲每個目標div,並刪除padding包裝?

像這樣DEMO

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