溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS如何實(shí)現(xiàn)內(nèi)容高度不夠的時(shí)候底部(footer)自動(dòng)貼底

發(fā)布時(shí)間：2021-03-17 12:50:45 來源：億速云 閱讀：499 作者：清風(fēng) 欄目：web開發(fā)

這篇“CSS如何實(shí)現(xiàn)內(nèi)容高度不夠的時(shí)候底部(footer)自動(dòng)貼底”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“CSS如何實(shí)現(xiàn)內(nèi)容高度不夠的時(shí)候底部(footer)自動(dòng)貼底”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

在 UI 切圖過程中，頁(yè)面往往由三個(gè)部分組成，頭部、內(nèi)容和底部。當(dāng)頁(yè)面的內(nèi)容高度不夠撐滿屏幕，底部（footer）就跟著內(nèi)容浮動(dòng)上來了，小屏幕由于高度有限看不出來異常，但如果是大屏的話，底部下面變會(huì)多出很多空白，非常影響美觀。

方案 1：Flex-Box

頭部使用 position: sticky; 吸頂，再使用盒子（ main ）來包住內(nèi)容（ container > content ）和底部（ footer ），這個(gè)盒子設(shè)置最小高度為除頭部外的剩余屏幕高度： min-height: calc(100vh - 50px); ，盒子里面使用彈性布局（ flex: 1 1 auto; ）讓內(nèi)容區(qū)域自動(dòng)撐開，而底部保持不變（ flex: 0 0 auto; ），這樣就有了 內(nèi)容不夠時(shí)底部自動(dòng)吸底，內(nèi)容足夠時(shí)底部自動(dòng)下移 的效果。

示例：

<html>
  <head>
    <title>CSS 實(shí)現(xiàn)底部（footer）貼底 - 方案 1：Flex-Box</title>
    <style>
      body {
        margin: 0;
      }
      header {
        height: 50px;
        background: #20c997;
        position: sticky;
        top: 0;
      }
      main {
        display: flex;
        flex-flow: column nowrap;
        min-height: calc(100vh - 50px);
      }
      .container {
        flex: 1 1 auto;
      }
      .content {
        background: #0d6efd;
      }
      footer {
        flex: 0 0 auto;
        background: #fd7e14;
      }
    </style>
  </head>
  <body>
    <!--頭部-->
    <header>
      header
    </header>
    <main>
      <div class="container">
        <!--內(nèi)容-->
        <div class="content">
          content
        </div>
      </div>
      <!--底部-->
      <footer>
        footer
      </footer>
    </main>
  </body>
</html>

在線演示： https://codepen.io/mazeyqian/pen/rNeymdG

優(yōu)點(diǎn)：底部高度可自由撐開。

缺點(diǎn)：低版本瀏覽器有兼容性（Flex-Box & Calc）問題。

方案 2：底部負(fù)距離 margin

內(nèi)容區(qū)設(shè)置最小高度鋪滿頁(yè)面，然后底部設(shè)置等高的負(fù)距離 margin 。

示例：

<html>
  <head>
    <title>CSS 實(shí)現(xiàn)底部（footer）貼底 - 方案 2：底部負(fù)距離 `margin`</title>
    <style>
      body {
        margin: 0;
      }
      header {
        height: 50px;
        background: #20c997;
        position: sticky;
        top: 0;
      }
      .container {
        min-height: calc(100vh - 50px);
      }
      .content {
        background: #0d6efd;
      }
      footer {
        height: 50px;
        margin-top: -50px;
        background: #fd7e14;
      }
    </style>
  </head>
  <body>
    <!--頭部-->
    <header>
      header
    </header>
    <div class="container">
      <!--內(nèi)容-->
      <div class="content">
        content
      </div>
    </div>
    <!--底部-->
    <footer>
      footer
    </footer>
  </body>
</html>

感謝你的閱讀，希望你對(duì)“CSS如何實(shí)現(xiàn)內(nèi)容高度不夠的時(shí)候底部(footer)自動(dòng)貼底”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手