引导固定部件布局问题

Question

我正在创建引导页面，我们有四个页面容器部分。

请在下面找到模型的屏幕，

<div id="fixedheader"> 
<header> 
</header> 
<div class="a"> 
</div> 
</div> 
<!--Fixed header End--> 
<!--Search content part start--> 
<div class="searchcontent"> 

</div> 
<!--Search Content End--> 

我想“固定头”部分应该是固定的我页面的一部分。我在下面的风格，

#fixedheader 
{ 
position:fixed; 
overflow: hidden; 
left:0; 
right:0; 
} 

现在“搜索内容”部分有的在普通视图中固定标题部分内容隐藏的，在下面找到我的样本输出画面的

如何解决问题。

Answer 1

尝试

CSS：

body{ 
    margin: 0; 
    padding: 0; 
    background: #80B196; 
} 
header{ 
    height: 150px; 
    background: yellow; 
} 
h1{ 
    margin: 0 auto; 
    padding: 50px 0 0 0; 
    width: 300px; 
    color: #333333; 
} 
ul{ 
    margin: 0; 
    padding: 0 0 0 50px; 
    list-style-type: none; 
    background: pink; 
} 
ul li{ 
    display: inline-block; 
    padding: 6px; 
    background: rgba(0,0,0,0.4); 
    vertical-align: top; 
} 
.wrapper{ 
    height: 1000px; 
} 
p{ 
    margin: 0 auto; 
    width: 60%; 
} 
.fixed-nav{ 
    width: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

和HTML

<div> 
    <header> 
    <h1>Header</h1> 
    </header> 
    <nav id="main-nav"> 
    <ul> 
     <li>div</li> 
     <li>class</li> 
    </ul> 
    </nav> 
    <span id="mine"></span> 
    <div class="wrapper"> 
    </div> 

Codepen Example