日本无码欧美一区精品久久,国内露脸久久久久影院,日韩夜夜高潮夜夜爽无码

中文字幕无码一区二区三区在线,久久精品人人做人人爽,国产一级内射无挡观看,十八禁在线黄色网站,日韩欧美国产另类久久久精品 ,少妇人妻偷人精品一区二区,久久午夜视频,亚洲春色AⅤ无码专区

占滿DIV剩余高度的三種方法

2021-8-4 前端達(dá)人

第一種，老套路，浮動(dòng)大法

代碼：

效果圖：

綠色DIV占滿了外層DIV

第二種：calc CSS計(jì)算

代碼：

這里在類名為div2的DOM外又加了一層div，主要就是為了說明，如果利用calc(100% - 50px);這種模式，那么這個(gè)DIV的父元素必須指定高度，可以是具體值，也可以是百分比，特別是dom結(jié)構(gòu)嵌套很深的時(shí)候，特別好用。

效果圖：

第三種，彈性盒子




    

        

            

            

        

        

            
                <!DOCTYPE html>
            

        

    

    

        

            

            

        

        

            
                <html lang="en">
            

        

    

    

        

            

            

        

        

            
                <head>
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8">
            

        

    

    

        

            

            

        

        

            
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            

        

    

    

        

            

            

        

        

            
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
            

        

    

    

        

            

            

        

        

            
                <title>Document</title>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            
                <style>
            

        

    

    

        

            

            

        

        

            
                *{
            

        

    

    

        

            

            

        

        

            
                margin:0;
            

        

    

    

        

            

            

        

        

            
                padding:0;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .parent{
            

        

    

    

        

            

            

        

        

            
                width:100vw;
            

        

    

    

        

            

            

        

        

            
                height:100vh;
            

        

    

    

        

            

            

        

        

            
                display:flex;
            

        

    

    

        

            

            

        

        

            
                flex-flow:column nowrap;
            

        

    

    

        

            

            

        

        

            
                overflow:hidden;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .a{
            

        

    

    

        

            

            

        

        

            
                height:50px;
            

        

    

    

        

            

            

        

        

            
                background:red;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .b{
            

        

    

    

        

            

            

        

        

            
                flex:1;
            

        

    

    

        

            

            

        

        

            
                background:green;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>
            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <div class="parent">
            

        

    

    

        

            

            

        

        

            
                <div class="a"></div>
            

        

    

    

        

            

            

        

        

            
                <div class="b"></div>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </body>
            

        

    

    

        

            

            

        

        

            
                </html>