薄煎饼堆叠

解构的煎饼不同,此示例不会在屏幕尺寸发生变化时封装其子项。此布局通常称为“粘性页脚”,可用于网站和应用、各种移动应用(页脚通常就是工具栏)和网站(尤其是单页应用)。

向该组件添加 display: grid 后,您将得到一个列网格,不过,主区域的高度将与其下方有页脚的内容一样高。

如需使页脚固定到底部,请添加:

.parent {
  display
: grid;
  grid
-template-rows: auto 1fr auto;
}

这会将页眉和页脚内容设置为自动采用其子级的大小,并将剩余的空间 (1fr) 应用于主区域,而大小为 auto 的行将采用其子级的最小内容的大小,因此内容增大时,行本身也会增大以进行调整。

<div class="parent">
 
<header class="section yellow">Header</header>
 
<main class="section blue">Main</main>
 
<footer class="section green">Footer Content</footer>
</div>

       
.parent {
 
display: grid;
 
grid-template-rows: auto 1fr auto;

 
/* Just for parent demo size */
 
height: 100vh;
}