煎饼堆栈布局

简介: 煎饼堆栈布局

微信截图_20221208081032.png


解构煎饼式布局不同,当屏幕尺寸改变时,本例不会包含它的子元素。通常称为粘性页脚,这种布局通常用于网站和应用程序,跨多个移动应用程序(页脚通常是工具栏)和网站(单页应用程序通常使用这种全局布局)。


向组件添加 display: grid 将提供一个单列网格,但是主区域的高度将仅与页脚下方的内容一样高。


要使页脚粘在底部,请添加:

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}点击复制复制失败已复制


1fr 页眉和页脚内容设置为自动采用其子项的大小,并将剩余空间 ( 1fr ) 应用于主区域,而 auto 调整大小的行将采用其子项的最小内容的大小,以便该内容大小增加,行本身将增长以进行调整。

目录
相关文章
|
5月前
969.煎饼排序
969.煎饼排序
|
6月前
2105. 给植物浇水II
【5月更文挑战第4天】给植物浇水II
42 1
|
6月前
2079. 给植物浇水
【5月更文挑战第3天】给植物浇水
50 0
|
12月前
草莓熊系列
草莓熊系列。
79 0
给植物浇水
给植物浇水
85 0
|
算法 JavaScript 前端开发
日拱算法:什么是“煎饼排序”?
通过“煎饼翻转”来进行排序,叫“煎饼排序”,那什么是“煎饼翻转”呢?(禁止套娃🐶)
|
人工智能
UPC-放牛奶的冰箱(二分)
UPC-放牛奶的冰箱(二分)
103 0
UPC-放牛奶的冰箱(二分)
|
存储
【LeetCode】这儿童节的糖不好吃啊
【LeetCode】这儿童节的糖不好吃啊
143 0
【LeetCode】这儿童节的糖不好吃啊
程序人生 - 阿萨姆奶茶 & 元气森林乳茶
程序人生 - 阿萨姆奶茶 & 元气森林乳茶
126 0
程序人生 - 阿萨姆奶茶 & 元气森林乳茶