如何创建固定的标题布局答案

【问题标题】：How to create fixed header layout如何创建固定的标题布局
【发布时间】：2023-03-07 12:22:01
【问题描述】：

尝试为此 jsfiddle 创建固定的标题布局时遇到一些问题：

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

基本上，我希望将 id 元素 app-header-container 固定在页面上。

我使用this article 作为参考，但还没有运气！

注意：我在 jsfiddle 中使用 SCSS。

【问题讨论】：

标签： css layout fixed

【解决方案1】：

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

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案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 都被忽略了。标记应该是选择器 { 属性 } 或选择器、选择器、选择器 { 属性 }

【讨论】：