页面布局问题

Question

页面是有个头部，必须一直固定在上面，使用了 fixed 布局，余下页面是内容去，当内容区过长时，出现滚动条，预期滚动条是只存在内容区，但是实际情况是滚动条开始在 头部，请问应该怎么解决？

Answer 1

<div class="container">
    <div class="header">header</div>
    <div class="content">
        <p style="height: 2000px;"></p>
    </div>
</div>
// 先重置样式
html,body,* {
   margin: 0;
   padding:0;
}
html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
}
.header {
    background-color: antiquewhite;
    height: 50px;
}
.content {
    background-color: #effffa;
    flex: 1;
    overflow-y: auto;
}

还有一种形式：

<div class="page">
    <header class="page-header">
      <div class="page-header__fixed">
        header
      </div>
    </header>
    <main class="page-main">
        <div style="height: 2000px;"></div>
    </main>
</div>
// 先重置样式
html,body,* {
   margin: 0;
   padding:0;
}
html, body, .page {
    height: 100%;
}
.page-header {
  height: 50px;
}
.page-header__fixed{
  background-color: antiquewhite;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
}
.page-main {
   background-color: #effffa;
   // 这里只要高是剩余的，怎么写都行，比如定位也可以；
   height: calc(100% - 50px);  
   overflow-y: auto;
}

Answer 2

可以使用flex布局：

html结构：

<div class="container">
    <div class="header">header</div>
    <div class="content">
        <p style="height: 2000px;"></p>
    </div>
</div>

css样式：

html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
}
.header {
    background-color: antiquewhite;
    height: 50px;
    min-height: 50px;
}
.content {
    background-color: #effffa;
    flex: auto;
    overflow: auto;
}

Answer 3

CodePen Demo
大概写了个，其实可以用其它的方式，
但是这个简洁明了最直接。
其实并不用这样，还有一种方式就是有点套娃。
CodePen Demo2

Answer 4

从element里一层层找下去，看看出现这个滚动条的原因是什么！