JavaScript >> Javascript 文檔 >  >> Tags >> CSS

快速提示:製作粘性頁腳的最佳方法

在開發 Web 佈局時,您可能在某些時候遇到過這個問題:

當頁腳靜態定位在正文的末尾,但頁面沒有太多內容時,就會發生這種明顯破壞的佈局。沒有什麼可以將頁腳向下推到足夠低的位置,它停留在屏幕中間,在其下方留下一大片空白區域。

在這個快速教程中,我們將了解一種現代技術來構建保證始終貼在頁面底部的頁腳。

技術

為了防止上述情況發生,我們將使用 flexbox 構建頁面,這是 CSS3 為構建自適應佈局提供的最先進的工具。對於那些不熟悉 flexbox 模型及其屬性的人,我們將在文末留下幾個鏈接。

我們的簡單演示頁面將包含頁眉、主要部分和頁腳。這是HTML,沒什麼特別的。

<body>
    <header>...</header>
    <section class="main-content">...</section>
    <footer>...</footer>
</body>

要啟用 flex 模型,我們添加 display: flex 到正文,並將方向更改為列(默認為行,即水平佈局)。此外,htmlbody 將需要 100% 的高度來填滿整個屏幕。

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

現在我們需要調整每個部分將佔用多少空間。我們已經通過 flex 做到了這一點 屬性,它將三個 flex-specs 捆綁在一起:

  • flex-grow - 定義容器中有多少可用空間用於元素。
  • flex-shrink - 當沒有足夠的空間容納所有東西時,元素會收縮多少。
  • flex-basis - 元素的默認大小。

我們希望我們的頁眉和頁腳佔用他們需要的盡可能多的空間,並且為主要內容部分保留所有其他內容。這種佈局的 CSS 如下所示:

header{
   /* We want the header to have a static height, 
   it will always take up just as much space as it needs.  */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

.main-content{
   /* By setting flex-grow to 1, the main content will take up 
   all of the remaining space on the page. 
   The other elements have flex-grow: 0 and won't contest the free space. */
   /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 1 0 auto;
}

footer{
   /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

要查看此技術的實際效果,請單擊下圖查看我們的演示頁面。使用粉紅色的大按鈕,您可以更改內容的數量,以幫助您觀察佈局如何適應並將頁腳始終推到底部。

結論

正如你所看到的,當從頭開始構建佈局時,flexbox 是一個強大的盟友。所有主流瀏覽器都支持它,除了一些小例外,因此在所有 IE9+ 項目中使用它非常安全 - 我可以使用 flexbox。

這裡有一些很棒的課程和秘籍,可以幫助您了解更多關於 flexbox 佈局模型的信息:

  • CSS-Tricks 的 flexbox 快速指南 - 在這裡。
  • 由 Flexbox 解決,這是一個致力於酷炫 flexbox 技術的網站 - 在這裡。
  • 5 分鐘互動課程 - 在這裡。

我們希望您喜歡我們創建粘性頁腳的方式,並且希望您從文章中學到了一些新的有用的東西。如果您有自己的超酷 flexbox 技巧,請給我們留言!


Tutorial JavaScript 教程
  1. 如果你是 Javascript 開發者,你必須知道這個 VS Code 擴展

  2. 為什麼 React.js 有這麼多炒作?

  3. Javascript:數組和對象

  4. 解決方案:重新排序 2 的冪

  5. 使用 Gatsby、Snipcart 和 Flotiq 構建電子商務網站

  6. Chrome:緩存存儲 VS 磁盤緩存

  7. 使用 PureScript 試用 Puppeteer - 第 1 部分

  1. 如何將 json 加載到我的 angular.js ng-model 中?

  2. 一個更好的 React CMS

  3. 將 Canvas 元素下載到圖像

  4. Div Square,寬度大小基於 100% 高度

  5. 使用 jquery 代碼使用原始輸入框編輯單個列表項?

  6. 數學地板 JavaScript |向下舍入一個數字並返回一個整數值

  7. 所有 div 的 100% 高度 - 蓋茨比

  1. 探索 NextJS 捆綁分析器

  2. Docker for Extreme Beginners in Desi(外行)語言:)

  3. Puppeteer 快速提示:如何進行基本身份驗證

  4. 在 nodejs 應用程序中實現分佈式跟踪