如何創建固定頭佈局

Question

有一些問題，試圖創建此的jsfiddle一個固定的頭佈局：

http://jsfiddle.net/4xk4D/107/

基本上，我想固定在id元素應用頭容器這一頁。

我使用this article作爲參考，但沒有運氣呢！

注：我在jsfiddle中使用SCSS。

Answer 1

#header { 
    top:0; 
    width:100%; 
    position:fixed; 
    background-color:#FFF; 
} 

#content { 
    position:static; 
    margin-top:100px; 
} 

Answer 2

試圖修改你的CSS：

#app-header-wrapper 
{ 
    width: 1024px; 
    margin: 10px auto; 
    background-color: pink;  
} 

#app-header-container 
{  

} 

#app-main-nav 
{ 
    background-color: pink; 
} 

#app-header 
{ 
    height: 93px; 
    background-color: blue; 
} 

#app-access 
{ 
    background-color: green; 
} 

#app-content-container 
{ 
    width: 1024px; 
    margin: 10px auto; 
    background-color: red; 
} 

#app-content 
{ 
    float: left; 
    width: 739px; 
    background-color: yellow; 
} 

#app-sidebar 
{ 
    float: right; 
    width: 275px; 
    background-color: orange; 
} 

#app-footer 
{ 
    margin: 0 auto; 
    width: 1024px; 
    height: 50px; 
    background-color: pink; 
} 

.clearfix:after 
{ 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
    font-size: 0; 
} 

或者只是嘗試使用CSS網格布點。其中之一http://1kbgrid.com/

Answer 3

#app-header-wrapper { 
width: 1024px; 
margin: 10px auto; 
background-color: pink; 

#app-header-container { 
#app-access { 
    background-color: green; 
} 
#app-header { 
    height: 93px; 
    background-color: blue; 
} 
#app-main-nav { 
    background-color: pink; 
} 
} 
} 

你不能以這種方式嵌套CSS。由於你如何嵌套和子嵌套在括號內，大多數CSS都被忽略。標記選擇器{屬性}或選擇器，選擇器，選擇器{屬性}