CSS中滾動容器與固定Tabbar自適應(yīng)的幾種方法實現(xiàn)

發(fā)布時間：2023-09-07 15:45:33 作者：cookcyq

我要評論

本文主要介紹了CSS中滾動容器與固定Tabbar自適應(yīng)的幾種方法實現(xiàn)，主要介紹了三種方法，文中通過代碼示例介紹的非常詳細(xì)，感興趣的可以了解一下

問題

容器高度使用 px 定高時，隨著頁面高度發(fā)生變化，組件展示的數(shù)量不能最大化的鋪滿，導(dǎo)致出現(xiàn)底部留白。
容器高度使用 vw 定高時，隨著頁面寬度發(fā)生變化，組件展示的數(shù)量不能最大化的鋪滿，導(dǎo)致出現(xiàn)底部留白。

很明顯這兩種方案都是采用 錯誤的像素單位 而導(dǎo)致的，下面我將會介紹如何使用其它方案來解決。

方式1：采用 padding

給最外層的容器定好 padding，子容器后續(xù)以 padding 為基準(zhǔn)，案例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body {
      margin: 0; padding: 0;
    }
    * {
      box-sizing: border-box;
    }
    .main {
      padding-top: 100px;
      padding-bottom: 100px;
    }
    .container .component {
      width: 200px;
      height: 200px;
      margin-bottom: 10px;
      background: orange;
    }
    header, footer {
      position: fixed;
      height: 100px;
      background: red;
      left: 0; right: 0;
    }
    header {
      top: 0;
    }
    footer {
      bottom: 0;
    }
  </style>
</head>
<body>
  <div class="main">
    <header>
      Header Tabbar
    </header>
    <div class="container">
      <div class="component">1</div>
      <div class="component">2</div>
      <div class="component">3</div>
      <div class="component">4</div>
      <div class="component">5</div>
      <div class="component">6</div>
      <div class="component">7</div>
      <div class="component">8</div>
      <div class="component">9</div>
      <div class="component">10</div>
    </div>
    <footer>
      Footer Tabbar
    </footer>
  </div>
</body>
</html>

效果：

即保留了原生滾動（不用設(shè)置 overflow），也實現(xiàn)了自適應(yīng)，解決了底部留白的問題。

在 header 不固定但 footer 固定的情況下，可將容器的 padding-top 去掉只保留 padding-bottom 即可。

方式2：采用 vh

其實，header 不用 fixied 也能達(dá)到吸頂效果，其原理是，給容器定高 + overflow 實現(xiàn)自己的滾動容器，但如果使用了錯誤的單位，比如本文一開始說的 vw，就會導(dǎo)致留白情況：

我們可以采用 vh 單位來解決，案例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body {
      margin: 0; padding: 0;
    }
    * {
      box-sizing: border-box;
    }
    .container {
      height: 65vh;
      overflow: auto;
    }
    .container .component{
      width: 200px;
      height: 200px;
      margin-bottom: 10px;
      background: orange;
    }
    header {
      height: 100px;
      background: pink;
    }
    footer {
      position: fixed;
      height: 100px;
      background: red;
      left: 0; right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
  <div class="main">
    <header>
      Header Tabbar
    </header>
    <div class="container">
      <div class="component">1</div>
      <div class="component">2</div>
      <div class="component">3</div>
      <div class="component">4</div>
      <div class="component">5</div>
      <div class="component">6</div>
      <div class="component">7</div>
      <div class="component">8</div>
      <div class="component">9</div>
      <div class="component">10</div>
    </div>
    <footer>
      Footer Tabbar
    </footer>
  </div>
</body>
</html>

高度未發(fā)生變化前：

高度發(fā)生變化后：

方式3：采用 JS getBoundingClientRect 動態(tài)計算

像 vh、vw 這類動態(tài)計算 px 的單位在 IE9 前是不支持的，這里可以考慮借助 JS 提供的 getBoundingClientRect 函數(shù)來實現(xiàn)。
它會返回當(dāng)前元素的寬高、top/left 偏離值，我們可以根據(jù)兩個元素之間的 top 值相減來獲取對應(yīng)的定高，實現(xiàn)組件最大化鋪滿，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body {
      margin: 0; padding: 0;
    }
    * {
      box-sizing: border-box;
    }
    .container {
      overflow: auto;
    }
    .container .component{
      width: 10vw;
      height: 10vw;
      margin-bottom: 10px;
      background: orange;
    }
    header {
      height: 100px;
      background: pink;
    }
    footer {
      position: fixed;
      height: 100px;
      background: red;
      left: 0; right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
  <div class="main">
    <header>
      Header Tabbar
    </header>
    <div id="container" class="container">
      <div class="component">1</div>
      <div class="component">2</div>
      <div class="component">3</div>
      <div class="component">4</div>
      <div class="component">5</div>
      <div class="component">6</div>
      <div class="component">7</div>
      <div class="component">8</div>
      <div class="component">9</div>
      <div class="component">10</div>
    </div>
    <footer id="footer">
      Footer Tabbar
    </footer>
  </div>
  <script>
    addEventListener("DOMContentLoaded", (event) => { 
      const footerDom = document.getElementById('footer')
      const containerDom = document.getElementById('container')
      const { top: footerOffsetTop } = footerDom.getBoundingClientRect();
      const { top: containerOffsetTop } = containerDom.getBoundingClientRect();
      const scrollHeight = footerOffsetTop - containerOffsetTop;
      containerDom.style.height = scrollHeight + 'px'
    });
  </script>
</body>
</html>

頁面高度未發(fā)生變化前：

頁面高度發(fā)生變化后：

到此這篇關(guān)于CSS中滾動容器與固定Tabbar自適應(yīng)的幾種方法實現(xiàn)的文章就介紹到這了,更多相關(guān)CSS 滾動容器與固定Tabbar自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！