引導固定部件佈局問題

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