Bootstrap Исправлена ​​ошибка с макетом детали

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