zoukankan      html  css  js  c++  java
  • 两栏布局——纵向

    宽度固定,上栏高度固定,下栏高度自适应。

    1.flex布局

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            html,
            body {
                height: 100%;
            }
            
            .content {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
            }
            
            .top {
                width: 100%;
                height: 200px;
                background-color: blue;
            }
            
            .bottom {
                width: 100%;
                flex: 1;
                background-color: red;
            }
        </style>
    </head>
    
    <body>
        <div class="content">
            <div class="top"></div>
            <div class="bottom"></div>
        </div>
    </body>
    
    </html>

    2.绝对定位布局

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            html,
            body {
                height: 100%;
            }
            
            .content {
                position: relative;
                width: 100%;
                height: 100%;
            }
            
            .top {
                position: absolute;
                width: 100%;
                top: 0;
                left: 0;
                height: 200px;
                background-color: blue;
            }
            
            .bottom {
                position: absolute;
                top: 100px;
                left: 0;
                width: 100%;
                height: 100%;
                flex: 1;
                background-color: red;
            }
        </style>
    </head>
    
    <body>
        <div class="content">
            <div class="top"></div>
            <div class="bottom"></div>
        </div>
    </body>
    
    </html>
  • 相关阅读:
    chapter 12_1 数据文件
    chapter11_3 字符串缓冲
    chapter11_2 Lua链表与队列
    chapter11_1 Lua数组、列表
    chapter9_4 非抢占式的多线程
    Java设计模式
    java内存回收机制
    javaIO流概述
    java集合概述
    java多线程
  • 原文地址:https://www.cnblogs.com/yiyi111/p/12365341.html
Copyright © 2011-2022 走看看