flex布局,下部自适应高度

2020-12-06  本文已影响0人  无花无酒_3cd3
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
       display:flex;
       flex-direction:column;
       height: 100%;
    }
    .div1{
      background-color: red;
    }
    .div2{
      background-color: green;
      flex:1;
    }
  </style>  
</head>
<body>
  <div class="box">
      <div class="div1">111 </div>
      <div>3333</div>
      <div class="div2">222</div>
  </div>
  <script>  
  
  </script>
</body>
</html> 
上一篇 下一篇

猜你喜欢

热点阅读