如何创建固定头布局

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都被忽略。标记选择器{属性}或选择器，选择器，选择器{属性}