<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{height:100%;margin: 0;padding: 0;}
        .flex-container{height: 100%;display: flex;flex-direction: column;text-align: center;
            width: 100%;
            position: absolute;
            top: 0;
            left:0;
        }
        .flex-item:nth-child(1),.flex-item:nth-child(3){flex-grow: 0;flex-shrink: 0;background-color: #ababab;}
        .flex-item:nth-child(2){flex-grow: 1;flex-shrink: 1;background-color: #000;overflow-y: auto; color: #fff;}
        .center{position: fixed;top: 50%;left: 50%;margin-top: -10px;margin-left: -24px;}
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">top</div>
        <div class="flex-item">
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
        </div>
        <div class="flex-item">bottom</div>
    </div>
</body>
</html>

flex 上下div固定, 中间div自适应的更多相关文章

  1. 布局：上下两个div高度固定，中间自适应

    需求:经典布局 —— 头尾固定高度中间高度自适应布局 头部固定高度,宽度100%自适应父容器: 底部固定高度,宽度100%自适应父容器: 中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中 ...

  2. 关于div一侧固定,另一侧自适应

    关于div一侧固定,另一侧自适应,从文字看出 一侧固定:说明有固定长度, 一侧自适应:说明是按比例缩放 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  3. CSS 左边div固定，右边div自适应

    有时候我们会有这样的需求,如图,aside是导航或者某些链接,右边的main是显示重要的内容,左边需要定宽,右边的main能够自适应剩余的宽度: <!DOCTYPE html PUBLIC &q ...

  4. Flex 布局 （两个div居中自适应 宽度变小变一列，宽度够就是两列）

    https://www.runoob.com/w3cnote/flex-grammar.html display: flex; justify-content: center; align-items ...

  5. div中iframe高度自适应问题

    网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...

  6. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

  7. css实现高度或者宽度不固定的div元素垂直左右居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 左右两栏div布局，高度自适应

    页面结构如下: <div class="container"> <div class="left"> left </div> ...

  9. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

随机推荐

  1. JSON: 介绍、应用

    ylbtech-JSON:  介绍.应用 JSONP(JSON with Padding)是 JSON 的一种“使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不同的 ...

  2. es6 class函数的用法，及兼容程度

    //es6中 class的新特性:面向对象的方式 class name{ fram(){ var div=document.getElementById("div"); div.s ...

  3. win10以上系统设定PPTP自动拨号

    :bohaorasdial adsl 123 123if not %errorlevel% == 0 goto :bohaoexit rasdial adsl 123 123 rasdial是开始拨号 ...

  4. Java zxing生成二维码所需的jar包

    免费的,不需要积分. 共有2个jar包, 链接: https://pan.baidu.com/s/1QJcEkRQOp1NdrNAgGC6LvQ 密码: 4524

  5. [UE4]GameUserSettings

  6. [UE4]Transform镜面翻转

  7. android adb push 命令

    1.获得root权限:adb root 2.设置/system为可读写:adb remount 3.将PC机上文件复制到手机:adb push 文件名  /system/lib

  8. 0002 - Spring MVC 拦截器源码简析：拦截器加载与执行

    1.概述 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理.例如通过拦截器可以进行权限验证.记录请求信息的日 ...

  9. 第11章 拾遗5：IPv6和IPv4共存技术（3）_NAT-PT技术【全书完】

    6.4 NAT-PT (1)NAT-PT和NAT的差别 ①NAT-PT(附带协议转换的网络地址转换)技术秉承NAT技术的思想,但在原理方面大有不同. ②NAT-PT和NAT本质的区别在于应用场合的不同 ...

  10. pycharm中快捷键的使用

    转载自:https://blog.csdn.net/fighter_yy/article/details/40860949 Alt+Enter 自动添加包 shift+O 自动建议代码补全 Ctrl+ ...