为什么使用＆＃34; position：fixed＆＃34;导致下面的div不能在bootstrap中清除

Question

我想在bootstrap中将我的内容分解为标题/正文，以便在必要时只滚动正文。但是通过使用position：fixed style，body div不再清除头部div。所以使用下面的html：

<div id="content">
  <div id="header" style="position: fixed">
    <p> This is a header </p>
  </div>
  <div id="body" style="clear: both">
    <p> This is the body </p>
  </div>
</div>

我的身体与标题重叠。我该怎么说清楚呢？我正在使用bootstrap 3.3.7

Answer 1

要获得此布局，您可以使用flexbox ...

https://www.codeply.com/go/Aysgka8Yck

#content {
    display: flex;
    height: 100%; 
    flex-direction: column;
}

#body {
    flex: 1;
    overflow: auto;
}