<!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. PAT 乙级 1071 小赌怡情（15 分）

    1071 小赌怡情(15 分) 常言道“小赌怡情”.这是一个很简单的小游戏:首先由计算机给出第一个整数:然后玩家下注赌第二个整数将会比第一个数大还是小:玩家下注 t 个筹码后,计算机给出第二个数.若玩 ...

  2. MyBatis的入门案例

    1.MyBatis的结构 2.MyBatis入门案例 a.创建java项目,并在其中导入相关开发包 b.导入约束文件 http://mybatis.org/dtd/mybatis-3-config.d ...

  3. Hive之一：hive2.1.1安装部署

    一.Hive 运行模式 与 Hadoop 类似,Hive 也有 3 种运行模式: 1. 内嵌模式 将元数据保存在本地内嵌的 Derby 数据库中,这是使用 Hive 最简单的方式.但是这种方式缺点也比 ...

  4. 廖雪峰Java1-4数组操作-5命令行参数

    adb和ideviceinstaller提供了许多参数供我们使用.命令行参数提供了这样的入口,针对不同的参数执行不同的命令. 1.命令行参数 命令行参数是一个String[] 数组,由JVM接收用户输 ...

  5. 引用文章 如何在lambda中引入递归调用

    // clang++ 3.5 // maybe gcc 4.9 support it, but I don't test it #include<iostream> int main() ...

  6. rtpproxy 配置

    1.下载rtpproxy并安装 cd /home/hi 下载rtpproxy最新版,比如rtpproxy-2.1.0.tar.gz tar –xzvf rtpproxy-2.1.0.tar.gz cd ...

  7. cordova 常用操作

    #创建插件 plugman create --name MyMath --plugin_id SimpleMath --plugin_version #进入插件目录 cd MyMath #plugin ...

  8. (转)深入sql server中的事务

    原文地址:http://www.cnblogs.com/chnking/archive/2007/05/27/761209.html 参考文章:http://www.cnblogs.com/zhuif ...

  9. Select模式和超时

    fd_set rset; FD_ZERO(&rset); int nready; int maxfd; int fd_stdin = fileno(stdin); if(fd_stdin &g ...

  10. gulp 编译es6 探究

    1.gulp配置: var gulp = require('gulp') var fs = require("fs") var babelify = require('babeli ...