如何将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中文网其他相关文章！