css垂直布局

我不是女神ヾ 2021-12-18 15:57 244阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>垂直布局</title>
      <style>
        *{
          margin: 0;
          padding: 0;
        }
        html{height:100%}
        body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";background: #ffffff;}
        #list {
          width: 100%;
          height: 100%;
          display: -ms-flexbox;
          display: flex;
          display: -webkit-flex;
          -ms-flex-direction: column;
          flex-direction: column;
          background-color: #f4f4f4;
          position: relative;
        }
        header {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 44px;
          display: flex;
          background:rgba(255,255,255,1);
          box-shadow:0px 1px 1px 0px rgba(0,0,0,0.12);
          display: -ms-flexbox;
          display: flex;
          display: -webkit-flex;
          background-color: #fff;
        }
        footer {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 44px;
          display: flex;
          background:rgba(255,255,255,1);
          box-shadow:0px 1px 1px 0px rgba(0,0,0,0.12);
          display: -ms-flexbox;
          display: flex;
          display: -webkit-flex;
          background-color: #fff;
        }
        .content {
          position: fixed;
          top: 44px;
          left: 0;
          width: 100%;
          height: 100%;
          display: -ms-flexbox;
          display: flex;
          display: -webkit-flex;
          -ms-flex-direction: row;
          flex-direction: row;
        }
        aside {
          width: 20%;
          background: blue;
        }
        section {
          width: 80%;
          background: red;
        }
      </style>
    </head>
    <body>
      <div id="list">
        <header>
          1
        </header>
        <div class="content">
          <aside>2</aside>
          <section>3</section>
        </div>
        <footer>4</footer>
      </div>
    </body>
    </html>

![图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20211218/cad4a546292e41e69a2c8fd1019093a3.png