关键词：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. 《T-SQL查询》读书笔记Part 2.执行计划

    一.关于执行计划 执行计划是优化器生成的用于确定如何处理一个给定查询的“工作计划”.一个计划包含一组运算符,通常按照特定的顺序来应用这些运算符.此外,一些运算符可以在它们之前的运算符还在处理时被应用( ...

  2. PAT1003:Emergency

    1003. Emergency (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue As an emerg ...

  3. Redis使用单进程单线程方式的优缺点分析

    [转] http://www.syyong.com/db/Redis-why-the-use-of-single-process-and-single-threaded-way-so-fast.htm ...

  4. java序列化反序列化深入探究（转）

    When---什么时候需要序列化和反序列化: 简单的写一个hello world程序,用不到序列化和反序列化.写一个排序算法也用不到序列化和反序列化.但是当你想要将一个对象进行持久化写入文件,或者你想 ...

  5. Tiny4412模式跳转

    ARM体系的CPU有以下7种工作模式: 1.用户模式(Usr):用于正常执行程序: 2.快速中断模式(FIQ):用于高速数据传输: 3.外部中断模式(IRQ):用于通常的中断处理: 4.管理模式(sv ...

  6. DCOS实践分享(4)：如何基于DC/OS整合SMACK(Spark, Mesos, Akka, Cassandra, Kafka)

    这篇文章入选CSDN极客头条 http://geek.csdn.net/news/detail/71572 当前,要保证业务的市场竞争力,仅靠设计一个可用并且好看的产品,已经完全不能满足要求.全球消费 ...

  7. 使用Ratpack与Spring Boot构建高性能JVM微服务

    在微服务天堂中Ratpack和Spring Boot是天造地设的一对.它们都是以开发者为中心的运行于JVM之上的web框架,侧重于生产率.效率以及轻量级部署.他们在服务程序的开发中带来了各自的好处.R ...

  8. TCP入门与实例讲解

    内容简介 TCP是TCP/IP协议栈的核心组成之一,对开发者来说,学习.掌握TCP非常重要. 本文主要内容包括:什么是TCP,为什么要学习TCP,TCP协议格式,通过实例讲解TCP的生命周期(建立连接 ...

  9. this.state.menuList.toArray()[0].get('id'）

    用toArray()处理传过来的list用get(")获取里面的值 而我用的是attributes得方法

  10. pdb 调试

    以前写python一直用pycharm,调试啥的比较方便,最近要在远程服务器上调试一些程序,只有一个控制台就可以用pdb进行调试了.常用的只有几个命令. break 或 b 设置断点 continue ...