如何將CSS網格用於粘頭和頁腳

CSS網格大大簡化了Web佈局。儘管有一個學習曲線，但其直觀的性質使使用曲線令人愉快，尤其是用於管理標題和頁腳。該教程演示了使用CSS網格同時創建固定和粘性頁腳。雷切爾·安德魯（Rachel Andrew）的“新CSS佈局”強烈建議您深入研究網格和Flexbox。

項目概述

我們將使用標頭，主內容和頁腳構建經典的HTML佈局。我們將實現兩個頁腳變化：一個固定的頁腳，無論內容長度如何，都保持在視口底部的固定頁腳，而傳統的粘性頁腳則粘在底部，但會被更長的內容推向。主內容區域將具有適應性的，跨越全視口寬度或定義寬度內的集中。

固定的頁腳雖然不如粘稠的頁腳常見，但由查爾斯·施瓦布（Charles Schwab）等網站使用。它們的實現通常涉及硬編碼的尺寸和襯墊。我們的方法避免了這些局限性，利用CSS電網的靈活性。

在繼續之前，請檢查Charles Schwab主頁的固定頁腳。在DevTools中檢查其代碼會發現硬編碼的高度和定位。

讓我們在沒有這些約束的情況下達到類似的效果。

初始樣式

我們將從最小的UI開始，使用CSS網格逐漸增強它。 CODESANDBOX（以及隨後的迭代）提供了交互式示例。

首先，我們確保使用視頻的全高度：

身體 {
  保證金：0; / *防止滾動條 */
}

#應用程式 {
  身高：100VH；
}

接下來，我們定義標題，主和頁腳及其網格結構。這種初始結構尚未按預期發揮作用。它是基礎：

身體 {
  保證金：0;
}

#應用程式 {
  身高：100VH；

  / *網格容器設置 */
  顯示：網格；
  網格板柱：1FR;
  網格板行：自動1FR自動；
  網格 - 板序：
    “標題”
    '主要的'
    '頁尾';
}

#App>標題{
  網格區域：標題；
}

#App> main {
  網格區域：主；
  填充：15px 5px 10px 5px;
}

#App>頁腳{
  網格區域：頁腳；
}

這創建了單列佈局。 1fr的意思是“佔據剩餘空間”，導致全寬列。使用auto （用於標頭和頁腳）和1fr （用於填充剩餘空間）的行大小。無需硬編碼高度。

內容集成

提供的代碼和框用於演示目的，但CSS網格原理仍然獨立於框架。標頭，主和頁腳組件呈現相應的HTML元素。計費和設置部分提供了樣本內容，證明了佈局的適應性。

初始佈局顯示功能性的“計費”部分，但“設置”將頁腳推開屏幕。滾動會影響整個頁面，從而導致標頭消失。讓我們解決這個問題。

固定標頭和頁腳

100vh高度和auto / 1fr行尺寸最初會導致內容超過視口時問題。添加overflow: auto到<main></main>元素可以在主內容區域內進行滾動，使標頭和頁腳固定：

 #App> main {
  網格區域：主；
  溢出：自動；
  填充：15px 5px 10px 5px;
}

此更新的演示可以解決滾動和可見性問題。

可調節的主部分寬度

要將主內容置於600px寬度之內或允許其跨越全視口，我們將網格嵌套在內部<main></main>。這使用三列（ 1fr 600px 1fr ），有效地居中600px部分。

 #App> main {
  顯示：網格；
  網格板行：1FR;
  網格板柱：1FR 600px 1fr;
}

內容是使用網格坐標定位的。 .full類允許內容跨越整個寬度：

 #App> e節{
  網格區域：1/2/1/3;
}

#App> section.full {
  網格區域：1/1 / 1/4;
}

注意使用網格線（三列的四行）。縮小視口揭示了固定600px寬度的截斷問題。 minmax(0, 600px)解決了這一點，允許寬度調整為600px：

主要的 {
  顯示：網格；
  網格板行：1FR;
  網格 - 板柱：1FR Minmax（0，600px）1FR;
}

最終演示展示了這種響應行為。

傳統的粘頁腳

為了創建傳統的粘頁，我們修改了網格結構。這<main></main>現在，元素包含其網格中的頁腳：

<div>
  <header></header>
  <main>
    <section></section>
    <footer></footer>
  </main>
</div>

#app網格已更新為有兩個行：

 #應用程式 {
  / *與以前相同 */
  網格板柱：1FR;
  網格 - 板行：自動1FR;
  網格 - 板序：
    “標題”
    '主要的';
}

這<main></main>將網格調整為包括頁腳：

 #App> main {
  顯示：網格；
  網格 - 板板行：1FR auto;
  網格 - 板柱：1FR Minmax（0，600px）1FR;
}

該網格中的頁腳定位：

 #App>頁腳{
  網格區域：2/1 / 3/4;
}

此設置允許頁腳通過內容推向<main></main>，產生所需的粘性頁腳效果。進行了較小的填充調整以確保正確對齊。最終演示說明了這種行為。將額外的樣式應用於截面元素，以允許在內容區域內進行水平滾動，同時保持垂直佈局。

結論

雖然沒有CSS網格可以實現所證明的技術，但網格提供了一個統一而優雅的解決方案。從固定的頁腳到粘性頁腳的簡單過渡證明了它的靈活性和易用性，使其成為複雜佈局的強大工具。提出的示例相對簡單，展示了CSS網格對更雄心勃勃的項目的潛力。

以上是如何將CSS網格用於粘頭和頁腳的詳細內容。更多資訊請關注PHP中文網其他相關文章！