位置：固定垂直空間

Question

我的位置是固定的一個相當基本的問題。

這裏有一個例子： http://jsfiddle.net/wxEsY/

我想是開始下面黑條（與固定位置）滾動。

任何幫助表示讚賞。

Regards

Answer 1

添加填充到第二個div等於第二個div的高度。

.content { 
    padding-top: 50px; 
    background: #ccc; 
    width: 100%; 
    height: 5000px; 
} 

當你說滾動背面的條形碼下方，這聽起來像你想的內容開始回欄的下方。所以添加一些填充到第二個div來說明固定div的存在。

Answer 2

這樣做嗎？

http://jsfiddle.net/Vqncx/

我只給從頂部相等的「內容」 DIV相對定位和y軸給「nav」的高度，然後，得到「NAV」的z-index以保持它在'內容'之上。

.nav { 
width: 100%; 
height: 50px; 
background: #000; 
position: fixed; 
z-index: 5; 
} 

.content { 
background: #ccc; 
width: 100%; 
height: 5000px; 
position: relative; 
top:50px; 
} 

Answer 3

你只需要一頂邊距添加到您的。內容的div等於.nav塊的大小+一些填充：

.content { 
    margin-top: 60px; 
    background: #ccc; 
    width: 100%; 
    height: 5000px; 
} 

Answer 4

這裏是實現這一那並不是一種更靈活的方式不需要知道固定div的高度（儘管它的語義較少）。

只需複製固定元素的標記。將第一個重複對的position設置爲fixed，將第二個的visibility設置爲hidden（還要確保第二個元素的position未設置或relative）。這裏有一個例子：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.nav { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #000; 
 
} 
 
.fixed{position:fixed} 
 
.filler{visibility:hidden} 
 

 
.content { 
 
    background: #ccc; 
 
    width: 100%; 
 
}

<div class="nav fixed"></div> 
 
<div class="nav filler"></div> 
 
<div class="content"> 
 
    
 
    First<br /> 
 
    Second<br /> 
 
    Third<br /> 
 
    Fourth<br /> 
 
    Fifth<br /> 
 
    Sixth<br /> 
 
    Seventh<br /> 
 
    Eigth<br /> 
 
    Ninth<br /> 
 
    
 
    <br /><br /><br /><br /> 
 
    <br /><br /><br /><br /> 
 
    <br /><br /><br /><br /> 
 

 
    Last<br /> 
 

 
</div>