CSS網(wǎng)格大大簡(jiǎn)化了Web佈局。儘管有一個(gè)學(xué)習(xí)曲線，但其直觀的性質(zhì)使使用曲線令人愉快，尤其是用於管理標(biāo)題和頁(yè)腳。該教程演示了使用CSS網(wǎng)格同時(shí)創(chuàng)建固定和粘性頁(yè)腳。雷切爾·安德魯（Rachel Andrew）的“新CSS佈局”強(qiáng)烈建議您深入研究網(wǎng)格和Flexbox。

項(xiàng)目概述

我們將使用標(biāo)頭，主內(nèi)容和頁(yè)腳構(gòu)建經(jīng)典的HTML佈局。我們將實(shí)現(xiàn)兩個(gè)頁(yè)腳變化：一個(gè)固定的頁(yè)腳，無(wú)論內(nèi)容長(zhǎng)度如何，都保持在視口底部的固定頁(yè)腳，而傳統(tǒng)的粘性頁(yè)腳則粘在底部，但會(huì)被更長(zhǎng)的內(nèi)容推向。主內(nèi)容區(qū)域?qū)⒕哂羞m應(yīng)性的，跨越全視口寬度或定義寬度內(nèi)的集中。

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

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

讓我們?cè)跊](méi)有這些約束的情況下達(dá)到類似的效果。

初始樣式

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

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

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

#應(yīng)用程式 {
  身高：100VH；
}

接下來(lái)，我們定義標(biāo)題，主和頁(yè)腳及其網(wǎng)格結(jié)構(gòu)。這種初始結(jié)構(gòu)尚未按預(yù)期發(fā)揮作用。它是基礎(chǔ)：

身體 {
  保證金：0;
}

#應(yīng)用程式 {
  身高：100VH；

  / *網(wǎng)格容器設(shè)置 */
  顯示：網(wǎng)格；
  網(wǎng)格板柱：1FR;
  網(wǎng)格板行：自動(dòng)1FR自動(dòng)；
  網(wǎng)格 - 板序：
    “標(biāo)題”
    '主要的'
    '頁(yè)尾';
}

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

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

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

這創(chuàng)建了單列佈局。 1fr的意思是“佔(zhàn)據(jù)剩餘空間”，導(dǎo)致全寬列。使用auto （用於標(biāo)頭和頁(yè)腳）和1fr （用於填充剩餘空間）的行大小。無(wú)需硬編碼高度。

內(nèi)容集成

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

初始佈局顯示功能性的“計(jì)費(fèi)”部分，但“設(shè)置”將頁(yè)腳推開(kāi)屏幕。滾動(dòng)會(huì)影響整個(gè)頁(yè)面，從而導(dǎo)致標(biāo)頭消失。讓我們解決這個(gè)問(wèn)題。

固定標(biāo)頭和頁(yè)腳

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

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

此更新的演示可以解決滾動(dòng)和可見(jiàn)性問(wèn)題。

可調(diào)節(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)格坐標(biāo)定位的。 .full類允許內(nèi)容跨越整個(gè)寬度：

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

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

注意使用網(wǎng)格線（三列的四行）。縮小視口揭示了固定600px寬度的截?cái)鄦?wèn)題。 minmax(0, 600px)解決了這一點(diǎn)，允許寬度調(diào)整為600px：

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

最終演示展示了這種響應(yīng)行為。

傳統(tǒng)的粘頁(yè)腳

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

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

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

 #應(yīng)用程式 {
  / *與以前相同 */
  網(wǎng)格板柱：1FR;
  網(wǎng)格 - 板行：自動(dòng)1FR;
  網(wǎng)格 - 板序：
    “標(biāo)題”
    '主要的';
}

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

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

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

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

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

結(jié)論

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

以上是如何將CSS網(wǎng)格用於粘頭和頁(yè)腳的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！