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

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

小二，上代码！

来喽~~

// html布局

<html>

<body>

<div class="container">

    <div class="head">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage</div>

    <div class="body">

      <div>orry, but the page you were trying to view does not exist.</div>

       <div>shhhhsss</div>

      <div>shhhhsss</div>

      <div>shhhhsss</div>

      <div>shhhhsss</div>

      <div>shhhhsss</div>

    </div>

 <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>

</div>

</body>

</html>

关键的css来啦！

 * {

             line-height: 1.2;

             margin:;

 }

  html, body {

             font-family: sans-serif;

             height: 100%;

             width: 100%;

 }

 .container{

      display: flex; // 关键， flex布局

      flex-direction: column; // 关键，三块主题column摆放。

      height: 100vh; // 关键，设置高度为可见高度的100%；

 }

 .head{

     width: 100%;

     background: springgreen;

 }

 .body{

      flex:; // 关键， 填充剩余空间

      width: 100%;

      background: lightyellow;

      overflow-y: scroll;   // 关键， 超出部分滚动

 }

 .footer{

     width: 100%;

     background: goldenrod;

 }

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

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Page Not Found</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        * {

            line-height: 1.2;

            margin: 0;

        }

        html, body {

            color: #888;

            font-family: sans-serif;

            height: 100%;

            width: 100%;

        }

        .container{

          display: flex;

          height: 100vh;

          flex-direction: column;

        }

        .head{

          width: 100%;

          background: springgreen;

        }

        .body {

          background: lightyellow;

          width: 100%;

          flex:1;

          color: black;

          overflow-y: scroll;

        }

        .footer {

          background: goldenrod;

          width: 100%;

        }

        .body div {

          height: 200px;

          width: 300px;

          background: greenyellow;

          margin: 20px;

        }

    </style>

</head>

<body>

<div class="container">

    <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>

    <div class="body">

      <div>orry, but the page you were trying to view does not exist.</div>

       <div>shhhhsss</div>

      <div>shhhhsss</div>

      <div>shhhhsss</div>

      <div>shhhhsss</div>

      <div>shhhhsss</div>

    </div>

 <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>

</div>

</body>

</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. 用Promise实现：带延时功能的链式调用

    // 1) 调用方式 new People('whr').sleep(3).eat('apple').sleep(5).eat('durian'); // 2) 打印结果 'hello, whr' - ...

  2. Java并发之乐观锁悲观锁

    定义 乐观锁和悲观锁这两种锁机制,是在多用户环境并发控制的两种所机制. 悲观锁:假定会发生并发冲突,屏蔽一切可能违反数据完整性的操作.[1]常见实现如独占锁.乐观锁:假设不会发生并发冲突,只在提交操作 ...

  3. 写完批处理脚本，再写个Gradle脚本，解放双手

    前言 上一篇写个批处理来帮忙干活---遍历&字符串处理中,我们已经学习如何写批处理脚本来帮我们做一些简单的重复性工作,本篇继续来学习如何用 Gradle 写脚本,让它也来帮我们干活 Gradl ...

  4. 如何用VBS编写一个简单的恶搞脚本

    windows系统的电脑, 首先右击桌面,选择新建-文本文档,在桌面上新建一个文本文档:     随后打开计算机或者是我的电脑,点击其中的组织(xp系统多为工具),选择下面的文件夹和搜索选项     ...

  5. win10想开测试模式，提示“设置元素数据时出错

    系统中按WIN键,搜索栏输入'CMD',右键点击找到的cmd.exe,选择'以管理员身份运行'.输入:"bcdedit -set loadoptions DDISABLE_INTEGRITY ...

  6. 基于 HTML5 OpenLayers3 实现 GIS 电信资源管理系统

    前言 通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用,形成的效果可以用来作为电信资源管理系统,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能 ...

  7. 关于Kafka监控方案的讨论

    之前在知乎上尝试过回答这个问题,后来问的人挺多,干脆在博客里面保存一下. 目前Kafka监控方案看似很多,然而并没有一个"大而全"的通用解决方案.各家框架也是各有千秋,以下是我了解 ...

  8. VMware12安装虚拟机教程、Ubuntu16.04安装教程（包括vmware tools的安装）

    转自https://jingyan.baidu.com/article/c275f6ba07e269e33d756714.html 方法/步骤 1 虚拟机.Linux操作系统介绍及下载地址 虚拟机VM ...

  9. BZOJ_2792_[Poi2012]Well_二分答案

    BZOJ_2792_[Poi2012]Well_二分答案 Description 给出n个正整数X1,X2,...Xn,可以进行不超过m次操作,每次操作选择一个非零的Xi,并将它减一. 最终要求存在某 ...

  10. BZOJ_1895_Pku3580 supermemo_Splay

    BZOJ_1895_Pku3580 supermemo_Splay Description 给出一个初始序列fA1;A2;:::Ang,要求你编写程序支持如下操作: 1. ADDxyD:给子序列fAx ...