页面布局问题

张怼怼
  • 384

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

回复
阅读 2.3k
4 个回答
<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;
}

可以使用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;
}

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

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

宣传栏