关键词：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. 第四章 MySQL数据类型和运算符

    5.1 MySQL数据类型介绍 一.数据类型简介 (1) 数据表由多列字段构成,每一个字段指定了不同的数据类型,指定了数据类型之后,也就决定了向字段插入的数据内容 (2) 不同的数据类型也决定了 My ...

  2. Mysql 查询缓存总结

    Mysql 查询缓存总结 MySQL查询缓存解释 缓存完整的SELECT查询结果,也就是查询缓存.保存查询返回的完整结果.当查询命中该缓存,mysql会立刻返回结果,跳过了解析.优化和执行阶段, 查询 ...

  3. Series

    Series是一种类似于一维数组的对象,是由一维数据(各种Numpy数据类型)以及一组与之相关的数据标签(即索引)组成. In [1]: from pandas import Series In [2 ...

  4. C++程序内存布局

      代码区(code area) 程序内存空间 全局数据区(data area) 堆区(heap area) 栈区(stack area) 一个由C/C++编译的程序占用的内存分为以下几个部分, 1) ...

  5. sql server 高可用性技术总结

    一.  复制Replication(快照.事务.合并) 应用场景: 负载均衡.提供副本读,写操作. 分区将历史数据复制到其它表中. 授权,将数据提供它人使用. 数据合并. 故障转移. 优点: 实现简单 ...

  6. springmvc配置详解 教程

    https://www.cnblogs.com/sunniest/p/4555801.html

  7. 深入浅出javascript学习笔记

    弱类型的隐式转换: 32 + 32 // 64 "32" + 32 // "3232" "32" – 32 // 0 巧用+/-规则转换类型 ...

  8. anguments

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

  9. 【BZOJ 4010】 [HNOI2015]菜肴制作

    Description 知名美食家小 A被邀请至ATM 大酒店,为其品评菜肴. ATM 酒店为小 A 准备了 N 道菜肴,酒店按照为菜肴预估的质量从高到低给予1到N的顺序编号,预估质量最高的菜肴编号为 ...

  10. BZOJ_1015_[JSOI2008]星球大战_并查集

    BZOJ_1015_[JSOI2008]星球大战_并查集 题意:很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的 机遇,一支反抗军摧毁了帝国的超级武器, ...