css 如何把元素固定在容器底部？（四種方式）

linong發表於2022-06-07
CSS

前幾天被人問，「如何把元素固定在容器底部」。（本來想直接把 demo 地址給他，結果沒找到，那麼今天我們來補一下）

Demo 地址

image.png

想法&思路

如果是頁面底部，我們可以直接 position: fixed;bottom: 0; 基於瀏覽器定位直接實現。

但是他要的效果是基於父級容器，那麼我們必須要使用其他手段來定位了

  1. relative 來限制 absolute，然後 bottom: 0，但是在內容過長的時候會導致顯示異常。所以我們需要做內部滾動。
  2. 如果做內部滾動，那麼我們只要可以撐開盒子即可。不需要絕對定位了

使用 flex 實現

  • 父級使用 flex 佈局，column 垂直排列。
  • 父級定高（height、maxHeight），.content 子級 flex:auto; 自動撐開。 或者 .content 做高度限制。

  • footer 可以使用 absolute 加 padding 。或者完全依賴文件流佈局都可以

      .demo1{
      position: relative;
      padding-bottom: 40px;
      display: inline-flex;
      flex-direction: column;
  }
  .demo1 .footer{
      position: absolute;
      bottom: 0;
      left: 0;right: 0;
      margin: 0;
  }
  .demo1 .content{
      overflow: auto;
  }

calc 實現

如果不使用 flex ，那麼我們可以用 calc 來減去 header 和 footer 空間。

<style>
    .demo3{
        position: relative;
    }
    .demo3 .content{
        overflow: auto;
        max-height: calc(100% - 40px);
    }
</style>

absolute 實現

如果 calc 相容性不太好，那麼還可以使用 absolute 將所有元素都脫離文件流。

<style>
    .demo4{
        position: relative;
    }
    .demo4 .header,.demo4 .footer{
        position: absolute;
        margin: 0;
        top:0;left:0 ;right:0;
    }
    .demo4 .footer{
        top: auto;
        bottom: 0;
    }
    .demo4 .content{
        overflow: auto;
        height: 100%;
        padding-top: 30px;
        padding-bottom: 30px;
        margin: 0;
        box-sizing: border-box;
    }
</style>

相關文章