<!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. python3学习笔记二（注释、缩进）

    注释 单行注释,用#开头即可 多行注释,用''' ''' 或""" """ 缩进 python不能像其他语言一样采用{}或者begin... ...

  2. java高并发编程（五）线程池

    摘自马士兵java并发编程 一.认识Executor.ExecutorService.Callable.Executors /** * 认识Executor */ package yxxy.c_026 ...

  3. PAT 乙级 1027 打印沙漏(20) C++版

    1027. 打印沙漏(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 本题要求你写个程序把给定的符号打印成 ...

  4. 问题 H: 老管家的忠诚（线段树）

    问题 H: 老管家的忠诚 时间限制: 0 Sec  内存限制: 128 MB提交: 54  解决: 21[提交][状态][讨论版][命题人:外部导入] 题目描述         老管家是一个聪明能干的 ...

  5. K近邻（K Nearest Neighbor-KNN）原理讲解及实现

    算法原理 K最近邻(k-Nearest Neighbor)算法是比较简单的机器学习算法.它采用测量不同特征值之间的距离方法进行分类.它的思想很简单:如果一个样本在特征空间中的k个最近邻(最相似)的样本 ...

  6. DockerFile服务

    Dockerfile分为四部分:基础镜像信息.镜像创建者信息.镜像操作指令.容器启动执行指令. 一.Dockerfile的书写规则及指令使用方法 Dockerfile的指令是忽略大小写的,建议使用大写 ...

  7. TextView-- 测量文字宽度

    https://my.oschina.net/lengwei/blog/637380; http://blog.csdn.net/mare_blue/article/details/51388403; ...

  8. Java基础：IO流之字节流和字符流

    1. 流的概念 流(stream)的概念源于UNIX中管道(pipe)的概念.在UNIX中,管道是一条不间断的字节流,用来实现程序或进程间的通信,或读写外围设备.外部文件等. 一个流,必有源端和目的端 ...

  9. 2018-7-23到quectel报道

    以后和quectel产品相关的技术都会用这个blog来记录

  10. C语言：传值，传地址

    形参:形式参数实参:实际参数 传值: 把实参的值复制给形参, 修改函数内的形参,不会影响实参. 传地址: 指针传值,形参为指向实参地址的指针 当对形参的指向操作时,相当于对实参本身进行的操作 #inc ...