吸底樣式的寫法

具體實現的效果:
1、不滿一屏的實現,按鈕始終在頁面的底部,如下圖所示:
這裏寫圖片描述
2、如果滿一屏的話底部按鈕按鈕就會根據屏幕的長度始終在最後一行的底部,具體效果如下圖所示:
這裏寫圖片描述

下面我來說說這種佈局的具體寫法:
html

<div class="containter">
    <div class="content">
        <p>文字測試</p>
        <p>文字測試</p>
        <p>文字測試</p>
        <p>文字測試</p>
        <p>文字測試</p>
        <p>文字測試</p>
    </div>
    <div class="footer">我是底部</div>
</div>

css

*{
     margin:0;
     padding:0;
 }
 html,body{
      height:100%;
      font-size:60px;
  }
  .containter{
    background:pink;
    position: relative;
      min-height: 100%;
  }
  .content{
    text-align: left;
      padding-bottom: 24vw;
  }
  .footer{
      background:red;
      position: absolute;
      left: 6vw;
      right: 6vw;
      bottom: 6.66667vw;
  }

實現的效果和上圖的效果是一樣的

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章