flex-全屏撑满

3,177 阅读1分钟

垂直

css
*{        padding: 0;        margin: 0;      }      html,body{        height: 100%;      }      .container{          width: 100%;          background-color: #e4eaf2;          padding-bottom: 30px;          display: flex;          flex-direction: column;          height: 100%;      }      .con_top{          width: 100%;          background-color: white;          height: 60px;          line-height: 60px;          color: #3350a7;          padding-left: 40px;          font-size: 16px;          font-weight: bold;      }      .con_mid{          margin: 40px 40px 0 40px;          background-color: white;          padding: 10px 10px;          border-top-left-radius: 4px;          border-top-right-radius: 4px;          height: 100%;      }


html
<body>    <div class="container" >        <div class="con_top">            内采订单转采购单        </div>        <div class="con_mid">                    </div>          </div></body>


横向同理