Bootstrap固定部件布局问题

Question

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

请在下面找到型号屏幕，

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

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

我希望“fixed-header”部分应该是我页面的固定部分。我在下面添加了样式，

#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