鬆餅堆疊
與去建構鬆餅不同,這個範例不會在螢幕大小變更時納入子項。這個版面配置通常稱為固定式頁尾,適用於網站和應用程式,跨行動應用程式 (頁尾通常為工具列) 和網站 (尤其是單頁應用程式)。
在元件中新增 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;
}
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2023-10-25 (世界標準時間)。
[null,null,["上次更新時間:2023-10-25 (世界標準時間)。"],[],[]]