css上下两栏布局（上栏固定下栏自适应）

红太狼 2021-08-28 18:17 559阅读 0赞

1.效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70][]

<html>
    
    <head>
        <title>上下两栏布局（上部固定，下栏自适应）</title>
        <meta charset="utf-8">
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            html,body{
                height: 100%;
            }
        </style>
    </head>
    
    <body>
        <section class="layout">
            <style>
             .layout{
                 height: 100%;
             }
             .layout .left-content .top{
                 width: 100%;
                 height: 60px;
                 background-color: aqua;
             }
             .layout .left-content .content{
                 position: absolute;
                 top: 60px;
                 bottom: 0px;
                 width: 100%;
                 overflow: auto;
                 background-color: red;
             }
            </style>
            <article class="left-content">
                <div class="top"></div>
                <div class="content">
                    <h1>中间自适应</h1>
                </div>
            </article>
        </section>
     
    </body>
    
    </html>
    
    <script>
    
    
    
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70]: /images/20210730/6e7410116d274a968a3c2824f374cb5c.png