关键词：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. 对于 Netty ByteBuf 的零拷贝(Zero Copy) 的理解

    此文章已同步发布在我的 segmentfault 专栏. 根据 Wiki 对 Zero-copy 的定义: "Zero-copy" describes computer opera ...

  2. Java移位运算符详解实例

    移位运算符它主要包括:左移位运算符(<<).右移位运算符(>>>).带符号的右移位运算符(>>),移位运算符操作的对象就是二进制的位,可以单独用移位运算符来处 ...

  3. Linux集群服务 LVS

    linux虚拟服务器(LVS)项目在linux操作系统上提供了最常见的负载均衡软件. 集群定义: 集群(cluster)技术是一种较新的技术,通过集群技术,可以在付出较低成本的情况下获得在性能.可靠性 ...

  4. css3 resize属性

    http://www.w3school.com.cn/cssref/pr_resize.asp 实例 规定可以由用户调整 div 元素的大小: div { resize:both; overflow: ...

  5. JXP

    JSX 初识:它是JavaScript的语法扩展,建议在React中使用它来描述UI的外观. 考虑这个变量声明:   在JSX中嵌入表达式 可以通过将其包含在大括号中来嵌入JSX中的任何JavaScr ...

  6. SSM-SpringMVC-06：SpringMVC关于静态资源无法展示的问题

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 按照之前的那种方式一路走下来,或许你没发觉有问题,只是你没有使用到而已 css,js,图片等无法正常使用怎么 ...

  7. javascript中的"x != x"

    在javascript的运用中,经常遇到判断两个 对象/值 是否相等的情况.有些表明上看着一样,其实他们不一样.有些特殊情况,需要我们辨别. 引用类型 他们都是引用类型,存储的空间将从堆中分配.变量处 ...

  8. 使用Docker部署Spring boot项目

    Docker是一个使用广泛的Linux容器管理工具包,它允许用户创建镜像,并将其容器实例化.通过本指南,我们可以学习到如何使用Docker部署Spring Boot项目. 先决条件 开发之前,你必须具 ...

  9. Android 不规则图像填充 小玩着色游戏

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45788433: 本文出自:[张鸿洋的博客] 一.概述 近期群里偶然看到一哥们在 ...

  10. 解决 Scrapy-Redis 空跑问题，链接跑完后自动关闭爬虫

    Scrapy-Redis 空跑问题,redis_key链接跑完后,自动关闭爬虫 问题:scrapy-redis框架中,reids存储的xxx:requests已经爬取完毕,但程序仍然一直运行,如何自动 ...