bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

CSS如何實現內容高度不夠的時候底部(footer)自動貼底-創新互聯

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

創新互聯公司專業為企業提供廣安網站建設、廣安做網站、廣安網站設計、廣安網站制作等企業網站建設、網頁設計與制作、廣安企業網站模板建站服務，十余年廣安做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

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

方案 1：Flex-Box

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

示例：

<html>
  <head>
    <title>CSS 實現底部（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">
        <!--內容-->
        <div class="content">
          content
        </div>
      </div>
      <!--底部-->
      <footer>
        footer
      </footer>
    </main>
  </body>
</html>

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

優點：底部高度可自由撐開。

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

方案 2：底部負距離 margin

內容區設置最小高度鋪滿頁面，然后底部設置等高的負距離 margin 。

示例：

<html>
  <head>
    <title>CSS 實現底部（footer）貼底 - 方案 2：底部負距離 `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">
      <!--內容-->
      <div class="content">
        content
      </div>
    </div>
    <!--底部-->
    <footer>
      footer
    </footer>
  </body>
</html>

感謝你的閱讀，希望你對“CSS如何實現內容高度不夠的時候底部(footer)自動貼底”這一關鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領會，快去試試吧，如果想閱讀更多相關知識點的文章，歡迎關注創新互聯行業資訊頻道！

分享文章：CSS如何實現內容高度不夠的時候底部(footer)自動貼底-創新互聯
瀏覽路徑：http://vcdvsql.cn/article14/dshsge.html

成都網站建設公司_創新互聯，為您提供定制網站、電子商務、網頁設計公司、品牌網站制作、企業建站、搜索引擎優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

手機網站建設