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

項目概述

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

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

在繼續(xù)之前，請檢查Charles Schwab主頁的固定頁腳。在DevTools中檢查其代碼會發(fā)現(xiàn)硬編碼的高度和定位。

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

初始樣式

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

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

身體 {
  保證金：0; / *防止?jié)L動條 */
}

＃應用程序 {
  身高：100VH；
}

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

身體 {
  保證金：0;
}

＃應用程序 {
  身高：100VH；

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

#App>標題{
  網(wǎng)格區(qū)域：標題；
}

#App> main {
  網(wǎng)格區(qū)域：主；
  填充：15px 5px 10px 5px;
}

#App>頁腳{
  網(wǎng)格區(qū)域：頁腳；
}

這創(chuàng)建了單列布局。 1fr的意思是“占據(jù)剩余空間”，導致全寬列。使用auto （用于標頭和頁腳）和1fr （用于填充剩余空間）的行大小。無需硬編碼高度。

內(nèi)容集成

提供的代碼和框用于演示目的，但CSS網(wǎng)格原理仍然獨立于框架。標頭，主和頁腳組件呈現(xiàn)相應的HTML元素。計費和設置部分提供了樣本內(nèi)容，證明了布局的適應性。

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

固定標頭和頁腳

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

 #App> main {
  網(wǎng)格區(qū)域：主；
  溢出：自動；
  填充：15px 5px 10px 5px;
}

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

可調節(jié)的主部分寬度

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

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

內(nèi)容是使用網(wǎng)格坐標定位的。 .full類允許內(nèi)容跨越整個寬度：

 #App> e節(jié){
  網(wǎng)格區(qū)域：1/2/1/3;
}

#App> section.full {
  網(wǎng)格區(qū)域：1/1 / 1/4;
}

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

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

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

傳統(tǒng)的粘頁腳

為了創(chuàng)建傳統(tǒng)的粘頁，我們修改了網(wǎng)格結構。這<main></main>現(xiàn)在，元素包含其網(wǎng)格中的頁腳：

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

#app網(wǎng)格已更新為有兩個行：

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

這<main></main>將網(wǎng)格調整為包括頁腳：

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

該網(wǎng)格中的頁腳定位：

 #App>頁腳{
  網(wǎng)格區(qū)域：2/1 / 3/4;
}

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

結論

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

以上是如何將CSS網(wǎng)格用于粘頭和頁腳的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！