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

  發布時間:2022-06-14 16:45:23   作者: linong   我要評論
本文主要介紹了css如何把元素固定在容器底部的四種方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

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

Demo 地址

想法&思路

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

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

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

使用 flex 實現

  • 父級使用 flex 布局,column 垂直排列。
  • 父級定高(height、maxHeight),.content 子級 flex:auto; 自動撐開。 或者 .content 做高度限制。
  • footer 可以使用 absolute 加 padding ?;蛘咄耆蕾囄臋n流布局都可以

    .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>

到此這篇關于css如何把元素固定在容器底部的四種方式的文章就介紹到這了,更多相關css元素固定底部內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

相關文章

  • 詳解CSS 子元素相對于父元素固定定位解決方案

    這篇文章主要介紹了詳解CSS 子元素相對于父元素固定定位解決方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小
    2020-09-03
  • css實現一個元素高度固定寬度按比例顯示效果

    這篇文章主要介紹了css實現一個元素高度固定寬度按比例顯示效果,本文給大家分享實例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-11-28

最新評論

美丽人妻被按摩中出中文字幕