鬆餅堆疊

去建構鬆餅不同,這個範例不會在螢幕大小變更時納入子項。這個版面配置通常稱為固定式頁尾,適用於網站和應用程式,跨行動應用程式 (頁尾通常為工具列) 和網站 (尤其是單頁應用程式)。

在元件中新增 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;
}