html-bootstrap自适应宽度和高度

一、

二、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="plugins/bootstrap-4.6.1-dist/css/bootstrap.min.css"/>
        <style type="text/css">
            html,body{
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .container-fluid{
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row" style="height: 100%;">
                <div class="col-md-3" style="background-color: aqua;height: 100%;">3</div>
                <div class="col-md-9" style="background-color: red;">9</div>
                
            </div>
            
        </div>
    </body>
</html>

 

posted @ 2022-06-20 15:16  ike_li  阅读(932)  评论(0)    收藏  举报