薄煎饼堆叠
bookmark_borderbookmark
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
与解构的煎饼不同,此示例不会在屏幕尺寸发生变化时封装其子项。此布局通常称为“粘性页脚”,可用于网站和应用、各种移动应用(页脚通常就是工具栏)和网站(尤其是单页应用)。
向该组件添加 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;
}
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2023-10-25。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2023-10-25。"],[],[]]