<!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. MIME Types - Complete List

    Suffixes applicable Media type and subtype(s) .3dm x-world/x-3dmf .3dmf x-world/x-3dmf .a applicatio ...

  2. PyCharm的一些设置

    设置使用UTF-8 在任何情况下: 设置写python脚本,新建 脚本的时候默认加的头文件. # !/usr/bin/env python# -*- coding:utf-8 -*-# Author: ...

  3. windows server 2008 R2 安装

    微软服务器操作系统大致有: server 2000(简称2K),还有server 2003(2K3),server 2008(2K8),server 2000和2003是基于NT内核的,而2008是基 ...

  4. Bootstrap的简介及使用

    一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.javascript 的,它简洁灵活,使得 Web 开发更 ...

  5. webpack入门详解

    webpack入门详解(基于webpack 3.5.4  2017-8-22) webpack常用命令: webpack --display-error-details    //执行打包 webpa ...

  6. (转) C#之VS自带RDLC报表学习

    原文地址:http://blog.csdn.net/hk_5788/article/details/49846905  原文工具VS2010,测试版本工具VS2013 报表是这样设计的: 看看结果: ...

  7. Django中的ORM相关操作：F查询，Q查询，事物，ORM执行原生SQL

    一    F查询与Q查询: 1 . F查询: 在上面所有的例子中,我们构造的过滤器都只是将字段值与某个常量做比较.如果我们要对两个字段的值做比较,那该怎么做呢? Django 提供 F() 来做这样的 ...

  8. Echarts动态加载饼状图的实例

    一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...

  9. [Ahoi2013]差异(后缀自动机)

    /* 前面的那一坨是可以O1计算的 后面那个显然后缀数组单调栈比较好写??? 两个后缀的lcp长度相当于他们在后缀树上的lca的深度 那么我们就能够反向用后缀自动机构造出后缀树然后统计每个点作为lca ...

  10. 初级安全入门——XSS注入的原理与利用

    XSS的简单介绍 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets,CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意攻击者 ...