关键词：display: flex，flex: 1,  overflow-y: scroll;

实现：head 和footer 固定，中间body多了滚动，少了撑满； head和footer宽度根据内容撑起，当然你可以自己设置........

小二，上代码！

来喽~~

  1. // html布局
  2. <html>
  3. <body>
  4. <div class="container">
  5.     <div class="head">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage</div>
  6.     <div class="body">
  7.       <div>orry, but the page you were trying to view does not exist.</div>
  8.        <div>shhhhsss</div>
  9.       <div>shhhhsss</div>
  10.       <div>shhhhsss</div>
  11.       <div>shhhhsss</div>
  12.       <div>shhhhsss</div>
  13.     </div>
  14.  <div class="footer">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Found</div>
  15. </div>
  16. </body>
  17. </html>

关键的css来啦！

  1.  * {
  2.              line-height: 1.2;
  3.              margin:;
  4.  }
  5.   html, body {
  6.              font-family: sans-serif;
  7.              height: 100%;
  8.              width: 100%;
  9.  }
  10.  .container{
  11.       display: flex; // 关键， flex布局
  12.       flex-direction: column; // 关键，三块主题column摆放。
  13.       height: 100vh; // 关键，设置高度为可见高度的100%；
  14.  }
  15.  .head{
  16.      width: 100%;
  17.      background: springgreen;
  18.  }
  19.  .body{
  20.       flex:; // 关键， 填充剩余空间
  21.       width: 100%;
  22.       background: lightyellow;
  23.       overflow-y: scroll;   // 关键， 超出部分滚动
  24.  }
  25.  .footer{
  26.      width: 100%;
  27.      background: goldenrod;
  28.  }

附上全部代码，可以自己复制到浏览器中打开，看效果~

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Page Not Found</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <style>
  8.  
  9.         * {
  10.             line-height: 1.2;
  11.             margin: 0;
  12.         }
  13.  
  14.         html, body {
  15.             color: #888;
  16.             font-family: sans-serif;
  17.             height: 100%;
  18.             width: 100%;
  19.         }
  20.         .container{
  21.           display: flex;
  22.           height: 100vh;
  23.           flex-direction: column;
  24.         }
  25.         .head{
  26.           width: 100%;
  27.           background: springgreen;
  28.         }
  29.         .body {
  30.           background: lightyellow;
  31.           width: 100%;
  32.           flex:1;
  33.           color: black;
  34.           overflow-y: scroll;
  35.         }
  36.         .footer {
  37.           background: goldenrod;
  38.           width: 100%;
  39.         }
  40.         .body div {
  41.           height: 200px;
  42.           width: 300px;
  43.           background: greenyellow;
  44.           margin: 20px;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49. <div class="container">
  50.  
  51.     <div class="head">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Found</div>
  52.     <div class="body">
  53.       <div>orry, but the page you were trying to view does not exist.</div>
  54.        <div>shhhhsss</div>
  55.       <div>shhhhsss</div>
  56.       <div>shhhhsss</div>
  57.       <div>shhhhsss</div>
  58.       <div>shhhhsss</div>
  59.     </div>
  60.  <div class="footer">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Found</div>
  61. </div>
  62. </body>
  63. </html>

flex 布局实现固定头部和底部，中间滚动布局的更多相关文章

  1. table固定头部，tbody内容滚动

    直觉的感受是修改thead与tbody,尝试了以下几种方法,但均告失败. 1. 将tbody设置为块状元素,然后设置表格的高度与溢出: 1. 将thead设置为绝对定位,然后设置表格的高度与溢出: 1 ...

  2. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  3. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  4. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  5. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  6. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  7. HTML5 开发APP(头部和底部选项卡)

    我们开发app有一定固定的样式,比如头部和底部选项卡部分就是公共部分就比如我在做的app进来的主页面就像图片显示的那样 我们该怎么实现呢,实现我们应该建一个主页面index.html,然后建五个子页面 ...

  8. CSS 实现左侧固定，右侧自适应两栏布局的方法

    "左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...

  9. 移动端固定头部和固定左边第一列的实现方案（Vue中实现demo）

    最近移动端做一份报表,需要左右滚动时,固定左边部分:上下滚动时,固定头部部分. 代码在Vue中简单实现 主要思路是: a.左边部分滚动,实时修改右边部分的滚动条高度 b.头部和内容部分都设置固定高度, ...

随机推荐

  1. 源码分析Session的台前幕后(Asp .Net MVC5)

    在这篇文章里,我们从源代码的角度重点分析Session的创建.缓存.销毁.管理. 通常我们说的Session指的是在控制器中使用的Session字段,该字段的类型是HttpSessionState.可 ...

  2. 原生javascript写自己的运动库（匀速运动篇）

    网上有很多JavaScript的运动库,这里和大家分享一下用原生JavaScript一步一步写一个运动函数的过程,如读者有更好的建议欢迎联系作者帮助优化完善代码.这个运动函数完成后,就可以用这个运动函 ...

  3. 节流throttle和防抖debounce

    underscore.js提供了很多很有用的函数,今天想说说其中的两个.这两个函数都用于限制函数的执行. debounce 在解释这个函数前,我们先从一个例子看下这个函数的使用场景.假设我们网站有个搜 ...

  4. anguments

    anguments是一个对象,长得很像数组的对象,但不是数组,而是伪数组. arguments的内容是函数运行时的实参列表 (function(d, e, f) { console.log(argum ...

  5. [Python]range与xrange用法对比

    [整理内容]具体如下: 先来看如下示例:>>>x=xrange(0,8)>>> print xxrange(8)>>>print x[0]0> ...

  6. java中Collection容器

    1.容器(Collection)也称为集合, 在java中就是指对象的集合. 容器里存放的都只能是对象. 实际上是存放对象的指针(头部地址): 这里对于八种基本数据类型,在集合中实际存的是对应的包装类 ...

  7. C++中memset（）函数的作用

    memset()函数可以对大内存的分配进行很方便的操作(初始化),所谓“初始化”,当然是指将你定义的变量或申请的空间赋予你所期望的值, 例如语句int i=0;就表明定义了一个变量i,并初始化为0: ...

  8. bzoj3598 [Scoi2014]方伯伯的商场之旅

    数位dp,我们肯定枚举集合的位置,但是如果每次都重新dp的话会很麻烦,所以我们可以先钦定在最低位集合,dp出代价,然后再一步步找到正确的集合点,每次更改的代价也dp算就好了. #include < ...

  9. SQL基础操作汇总

    SQL基础操作汇总 一.表操作 1.表的创建(CREATE TABLE): 基本语句格式:    CREATE TABLE  table_name ( col_name    datatype, -- ...

  10. CentOS 7下单机部署RabbltMQ环境的操作记录

    一. RabbitMQ简单介绍 在日常工作环境中,你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息 ...