zoukankan      html  css  js  c++  java
  • 页面布局二(三栏布局)

    题目:上下高度固定,中间自适应。(移动端用的比较广泛)

    方案一:flexbox布局

      代码如下

    <style>
       html,body{
           margin:0;
           height:100%;
       }
        .layout{
            display:-webkit-flex;
            display:flex;
            -webkit-flex-direction:column;
            flex-direction:column;
            height:100%;
        }
        .header{
            height: 40px;
            background:red;
        }
        .main{
            -webkit-box-flex:1;
            -webkit-flex: 1;
            flex: 1;
            background:yellow;
        }
       .footer{
           height: 40px;
           background:green;
       }
    </style>
    <!--flexbox布局-->
    <section class="layout">
        <div class="header">header</div>
        <div class="main">
            弹性滚动区域
        </div>
        <div class="footer">footer</div>
    </section>

    方案二:表格布局

      代码如下:

    <style>
       html,body{
           margin:0;
           height:100%;
       }
        .layout{
            display:table;
            width: 100%;
            height:100%;
        }
       .layout>div{
           display:table-row;
       }
        .header{
            height: 40px;
            background:red;
        }
        .main{
            background:yellow;
        }
       .footer{
           height: 40px;
           background:green;
       }
    </style>
    <!--table布局-->
    <section class="layout">
        <div class="header">header</div>
        <div class="main">
            弹性滚动区域
        </div>
        <div class="footer">footer</div>
    </section>

    通过定位也可做到。

  • 相关阅读:
    Nginx lingering_close延迟关闭
    Nginx 减少关闭连接的time_wait端口数量
    Tcp协议的keepalive功能
    Nginx 慢启动与拥塞窗口
    Nginx 优化缓冲区与传输效率
    linux 目录分类与文件操作
    Nginx 滑动窗口与缓冲区
    python 关键字yield
    模块与包
    面向对象
  • 原文地址:https://www.cnblogs.com/yangkangkang/p/8665749.html
Copyright © 2011-2022 走看看