Bootstrap Fixed part layout issue

Question

I am creating bootstrap page we have four parts of page container.

Please find below of model screen,

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

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

I want "fixed-header" part should be fixed part of my page. i added style below,

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

Now "search content" part some of the content hide in fixed header part in normal view ,find below of my sample output screen

How to fix the issue.

Answer 1

Try

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;
}

and 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