zoukankan      html  css  js  c++  java
  • flex 上下div固定, 中间div自适应

    <!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;
    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>

  • 相关阅读:
    DPDK ring简单说明
    DPDK初始化流程
    从《雪白血红》说起(2)
    从《雪白血红》说起(1)
    苏联印象(1)-过往与想象
    DPDK ip分片与重组的设计实现
    linux协议栈分析-序
    DPDK与QoS(服务质量)
    DPDK LPM路由存储与查找
    《教父》曾说
  • 原文地址:https://www.cnblogs.com/freespider/p/9121270.html
Copyright © 2011-2022 走看看