zoukankan      html  css  js  c++  java
  • 宽高自适应案例

    <style>
    * {
    margin: 0;
    padding: 0;
    }
    .layout{
    500px;
    height: 600px;
    border: 1px solid red;
    margin: 50px auto;
    /*设置父容器为伸缩盒子*/
    display: flex;
    /*默认的主轴是row,这里需要以列的方式进行排列*/
    flex-direction: column;
    }
    header{
    100%;
    height: 60px;
    background-color: red;
    }
    main{
    100%;
    /*设置父容器为伸缩盒子*/
    display: flex;
    /*让当前伸缩项占据父容器的剩余空间*/
    flex: 1;
    }
    main>article{
    height: 100%;
    background-color: pink;
    /*让当前伸缩项占据父容器的剩余空间*/
    flex: 1;
    }
    main>aside{
    height: 100%;
    background-color: purple;
    /*让当前伸缩项占据父容器的剩余空间*/
    flex: 3;
    }
    footer{
    100%;
    height: 80px;
    background-color: skyblue;
    }
    </style>
    </head>
    <body>
    <div class="layout">
    <header></header>
    <main>
    <article></article>
    <aside></aside>
    </main>
    <footer></footer>
    </div>
    </body>
  • 相关阅读:
    事件
    DOM中对象的获得
    C# 字符串 相关操作
    两个listbox 复制
    C#窗体控件简介ListBox
    store procedure
    view_baseInfo
    不走弯路,就是捷径
    inherit
    Excel 版本对应
  • 原文地址:https://www.cnblogs.com/lujieting/p/10230742.html
Copyright © 2011-2022 走看看