flex 布局实现固定头部和底部，中间滚动布局

时间：2022-02-15 06:14:08

关键词：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页面页脚固定在页面底部&lpar;多种方法实现&rpar;

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

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

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

  7. HTML5 开发APP&lpar;头部和底部选项卡&rpar;

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

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

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

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

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

随机推荐

  1. string&period;format

    string.Format("{0:#,0}", c.num), //千分号,有小数就保留2位小数 string.Format("{0:N2}", c.amou ...

  2. 游戏设计模式：Subclass Sandbox模式，以及功能方法集的设计思考

    书中总结出这种 Subclass Sandbox 的设计模式 Game Design Patterns: Subclass Sandbox 这种模式要点有两点: 在基类中实现各种功能性方法供子类调用 ...

  3. jad的用法（反编译某目录下所有class&rpar;

    jad -s java -d E:\scm\MonitorServerEx\src2 -o -ff -r E:\scm\MonitorServerEx\classes-recomp\**\*.clas ...

  4. python字符串转义与正则表达式特殊字符转义

    最近在自学python,字符串和正则表达式的特殊字符转义有点混淆,做个笔记简单总结一下. 1.普通字符串转义 在字符串中使用特殊字符时,要用反斜杠(\)转义字符.例如:'Let\'s go!',这里对 ...

  5. Content-Type boundary 问题

    我并不知道问题怎么描述清楚一些. 事情是这样的,使用  Microsoft Dynamics CRM Server 2016 做CRM系统的时候用到 使用 Web API 执行批处理操作(参见SDK或 ...

  6. &lbrack;Python数据挖掘&rsqb;第8章、中医证型关联规则挖掘

    一.背景和挖掘目标 二.分析方法与过程 1.数据获取 2.数据预处理  1.筛选有效问卷(根据表8-6的标准) 共发放1253份问卷,其中有效问卷数为930  2.属性规约 3.数据变换 ''' 聚类 ...

  7. Linux下计划任务以及crontab权限问题

    在Linux工作环境下,我们有时可能会需要在未来某个时间执行某个命令或脚本,但是我们又不可能定个闹钟,然后到点了再去执行吧,这多麻烦.还好我们的Linux系统这么强大,提供了任务计划这个功能,我们就不 ...

  8. 遍历DOM树，获取子节点

    获取子节点的方法有:  方法  说明  children()  选取子节点,可以带过滤参数.但只能选择子节点,不能选择孙子节点.  find()  选取子节点,可以带过滤参数.可以选择子节点及孙子节点 ...

  9. 登录PeopleTools 提示ora-00942表视图不存在 select xxx from sysadm&period;psoprdefn

    起因:本来跟DBA说了把生产的库同步到CFG环境,还跟她说了,dev tst cfg在一台机器上,结果她还是把dev给覆盖了,幸好及时发现,一部分对象被删除了(序列,视图,有可能也有表). 视图和一部 ...

  10. Shell初学（一）hello world

    精简: 1.创建:可以使用 vi/vim 命令来创建文件如: test.sh   ,扩展名并不影响脚本执行,写什么都可以. 2.hello_world: #!/bin/bash            ...

相关文章