CSS怎么实现头部和底部固定中间出现滚动条

本篇内容介绍了“CSS怎么实现头部和底部固定中间出现滚动条”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站制作、做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的滨海网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

原理说明

利用flex布局,很容易实现“左右两边固定,剩余100%”的布局模式

利用flex-direction: column;样式,就很容易实现“顶部和底部固定,中间100%”的情况

要设置html,body的高度为100%;否则设置的div高度为100%是0px;

必须要保证设置的控件高度从html>body>div>....>div 需要一层一层的继承下来

案例(原理说明)

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<style>

  /*设置html和body的高度为显示屏的高度*/

  html, body {

    height: 100%;

    margin: 0;

  }

  .wrap {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    /*布局方向是垂直的*/

    flex-direction: column;

    width: 100%;

    height: 100%;

  }

  /*设置顶部和底部的高度*/

  .header, .footer {

    height: 40px;

    line-height: 40px;

    background-color: #D8D8D8;

    text-align: center;

  }

  /*设置高度是跟父元素的高度一致,100%;*/

  /*实际高度是 100% 减去顶部高度和底部高度,左右两边固定,中间是剩余100%原理一致*/

  .main {

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;

    width: 100%;

    overflow: auto;

  }

</style>

<body>

<div class="wrap">

  <div class="header">header</div>

  <div class="main">

    <div style="height: 300%">弹性滚动区域</div>

  </div>

  <div class="footer">footer</div>

</div>

</body>

</html>

案例二(回字形布局)

利用

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<style>

  html,body{

    height: 100%;

    margin: 0;

  }

  .wrap{

    display: flex;

    flex-direction: column;

    height: 100%;

  }

  .header{

    height: 50px;

    padding: 15px;

  }

  .footer{

    height: 50px;

  }

  .main{

    flex-grow: 1;

    overflow: auto;

    display: flex;

    align-items: flex-start;

  }

  .left{

    width: 300px;

    background: yellowgreen;

  }

  .right{

    width: 300px;

    background: greenyellow;

  }

  .center{

    flex-grow: 1;

    background: aquamarine;

    height: 100%;

    overflow: auto;

  }

</style>

<body>

<div class="wrap">

  <div class="header">header</div>

  <div class="main">

    <div class="left">

      left

    </div>

    <div class="center">

      <div style="height: 300%">

        <div>center</div>

      </div>

    </div>

    <div class="right">

      right

    </div>

  </div>

  <div class="footer">footer</div>

</div>

</body>

</html>

设置html和body的高度为100%,则body的高度是显示器的高度

利用flex布局,头部和底部固定,中间设置为剩下的100%

中间部分,利用flex布局,左右两边固定,中间是剩下的100%

设置“中心”的高度为100%,则是参照父元素的高度,除去顶部和底部的高度的,剩下的100%高度

案例 (计算出中间组件的高度,剩下的百分百)

设置html和body的高度为100%,则body的高度为显示器的高度,则子元素的高度是参考body的

头部和底部固定,计算出中间的高度

利用flex布局,左右两边固定,中间为剩下的100%

高度设置为父元素的100%;中间如果内容过多,则设置overflow:auto就会出现滚动条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

  html,body{

    margin: 0;

    height: 100%;

  }

  .flex-study{

    line-height: 35px;

    height: calc(100% - 100px);

  }

  .flex{

    display: flex;

  }

  .header{

    width: 100%;

    background: #42a5f6;

  }

  .content{

    width: 100%;

    background: bisque;

    align-items: flex-start;

    height: 100%;

    overflow: hidden;

  }

  .left{

    width: 300px;

    background: yellowgreen;

  }

  .right{

    width: 300px;

    background: greenyellow;

  }

  .center{

    flex-grow: 1;

    background: aquamarine;

    height: 100%;

    overflow: auto;

  }

  .footer{

    width: 100%;

    background: blueviolet;

  }

</style>

<body>

<div class="flex-study">

  <div class="header">

    header

  </div>

  <div class="content flex">

    <div class="left">

      left

    </div>

    <div class="center">

      <div style="height: 300%">

        <div>center</div>

      </div>

    </div>

    <div class="right">

      right

    </div>

  </div>

  <div class="footer">

    footer

  </div>

</div>

</body>

</html>

“CSS怎么实现头部和底部固定中间出现滚动条”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!

标题名称:CSS怎么实现头部和底部固定中间出现滚动条
文章链接:https://www.cdcxhl.com/article8/iiddop.html

成都网站建设公司_创新互联,为您提供网站设计营销型网站建设网站收录静态网站面包屑导航标签优化

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

微信小程序开发