css--常見左右盒子寬度高度自適應佈局

丶Serendipity丶發表於2021-06-20
CSS

前言

　　前端開發工程師最基礎的技能要求是根據 ui 設計稿還原網頁，這就缺少不了必要的網頁佈局，首先看下最近小夥伴問我的一個問題，他說一個網頁有左右兩個部分，左右兩個部分的高度都不固定，要使得右部分的寬度充滿剩餘的部分，並且高度隨著左邊的高度發生自適應，而左側的高度隨著內容的高度發生變化，對於這麼一個簡單的網頁佈局，對於一個入行不久的小白來說遇到這樣的問題肯定束手無策，本文就來整理一下我實現這種佈局的集中方案。

正文

　　分析上面的需求，很快構建出基礎的佈局方案，首先左右寬度自適應的不難，高度的呢？具體效果如下：下面是總結的幾種實現方案：

　　

　　1.高度height:auto

　　首先來了解下 height:100% 和 height:auto 的區別，height:100%,是指相對父元素高度而定義的高度，也就是按它最近且有定義的高度的父元素來定義高度，height:auto 是根絕塊內內容的高度來調節高度。看到這裡你可能會覺得把右邊盒子通過設定height:100% 來繼承父元素的盒子即可，但是如果你仔細看需求，左邊盒子高度也是隨內容的高度稱大，所以這種方案行不通。因此需要使用height:auto來搭配flex佈局來實現。

 

<style>
    .wrap {
      width: 100%;
      border: 1px solid red;
      display: flex;
    }
    .left {
      width: 800px;
      border: 1px solid red;
    }
    .item1 {
      width: 100%;
      height: 200px;
      border: 1px solid black;
    }
    .item2 {
      width: 100%;
      height: 50px;
      border: 1px solid black;
    }
    .item3 {
      width: 100%;
      height: 80px;
      border: 1px solid black;
    }
    .right {
      flex: 1;
      height: auto;
      border: 1px solid red;
      display: flex;
    }
    .item4 {
      flex: 1;
    }
  </style>
<body>
  <div class="wrap">
    <div class="left">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
    <div class="right">
      <div class="item4">right</div>
    </div>
  </div>
</body>

 

　　上面的程式碼，首先設定最外層父元素wrap的寬度為整個瀏覽器body寬度，給其設定flex佈局，使得左右兩個盒子橫向佈局，給左邊盒子設定固定寬度，右邊盒子flex:1 就會使得右邊盒子自適應撐滿整個父元素，使其寬度自適應，然後高度設定為auto,適應了父元素的高度。

　　2.felx佈局中 algin-items:stretch

<style>
    .wrap {
      width: 100%;
      border: 1px solid red;
      display: flex;
      align-items: stretch;
    }
    .left {
      width: 800px;
      border: 1px solid red;
    }
    .item1 {
      width: 100%;
      height: 200px;
      border: 1px solid black;
    }
    .item2 {
      width: 100%;
      height: 50px;
      border: 1px solid black;
    }
    .item3 {
      width: 100%;
      height: 80px;
      border: 1px solid black;
    }
    .right {
      flex: 1;
      border: 1px solid red;
      display: flex;
    }
    .item4 {
      flex: 1;
    }
  </style>
<body>
  <div class="wrap">
    <div class="left">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
    <div class="right">
      <div class="item4">right</div>
    </div>
  </div>
</body>

　　上面的程式碼，設定algin-items:stretch ，是 flex 佈局中設定子元素在交叉軸方向的長度拉伸至父元素的長度，這裡主軸為橫軸，flex:1，使得右側盒子寬度自適應，交叉軸是縱軸，設定 stretch 後，右側盒子拉伸至父元素的高度，從而實現了高度自適應。

　　3.通過 margin-bottom 和padding-bottom 設定為相同的值

<style>
      .wrap {
        height: 100%;
        width: 100%;
        border: 1px solid red;
        overflow: hidden;
        display: flex;
      }
      .left {
        margin-bottom: -5000px;
        padding-bottom: 5000px;
        float: left;
        width: 800px;
        background-color: skyblue;
        border:2px solid pink;
      }
      .item1 {
        width: 100%;
        height: 200px;
        border: 1px solid black;
      }
      .item2 {
        width: 100%;
        height: 50px;
        border: 1px solid black;
      }
      .item3 {
        width: 100%;
        height: 80px;
        border: 1px solid black;
      }
      .right {
        flex: 1;
        float: right;
        margin-bottom: -5000px;
        padding-bottom: 5000px;
        background-color: tan;
        border: 2px solid pink;
      }
    </style>
<body>
    <div class="wrap">
      <div class="left">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item3">3</div>
        <div class="item2">3</div>
        <div class="item1">3</div>
      </div>
      <div class="right">right</div>
    </div>
  </body>

　　上面的程式碼通過設定flex佈局，使得左右兩個盒子寬度自適應，然後分別設定左右兩個盒子margin-bottom 和padding-bottom 為相同的值，使得左右兩個盒子的高度相同，但是內部元素無法撐滿這個高度，存在溢位的部分，因此需要給父元素設定 overflow:hidden 使得溢位的部分隱藏。

　　最後，寶，今天我去打疫苗了，打的愛你的每一秒。我的寶。

 

總結

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。

相關文章