html - Flexbox/Grid 取决于子百分比高度(Firefox/Edge)
问题描述
我一直在尝试从表格布局切换到更现代的布局。我有一个需要“固定”页眉和粘性页脚的布局。为了实现它,我决定稍微改变页面的工作方式,而不是让整个页面滚动,而是创建了一个滚动 div 作为正文/页脚区域。这使标题保持在顶部并具有动态高度,同时模仿典型页面的滚动方式。
但是,我在 flexbox 和 grid 中都遇到了同样的问题。只要我没有任何基于百分比的子元素,我的布局就可以正常工作。如果有的话,似乎弹性框会根据孩子调整大小。例如,如果其中一个子级中的 div 的高度设置为 100%,它将显示该 div,但溢出后的任何其他内容和页脚显得不合适。这对我来说似乎有点违反直觉,我希望有人能解释它背后的设计选择?是否有任何解决方法可以允许这种功能?
我基本上认为 flexbox 系统将允许填充剩余空间(用于身体),但也可以根据需要扩展以包含所有孩子。
我写了一个快速示例来展示我在说什么。见下文,谢谢!
编辑:这似乎只发生在 Firefox 和 Edge,而不是 Chrome。
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
display: inline-block;
height: 100%;
width: 50%;
max-height: 100%;
overflow: auto;
}
.bg {
background-color: gray;
}
.span {
width: 100%;
height: 100%;
}
.flex {
display: flex;
flex-direction: column;
min-height: 100%;
}
.flex > .main {
flex: 1;
}
<div class="container">
<div class="flex">
<div class="main">
<ul>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
</ul>
</div>
<footer>
This should be a sticky footer
</footer>
</div>
</div><div class="container">
<div class="flex">
<div class="main">
<div class="bg span">
This breaks the page
</div>
<ul>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
<li>This is a spacer</li>
</ul>
</div>
<footer>
This should be a sticky footer
</footer>
</div>
</div>
解决方案
推荐阅读
- pandas - 在没有相同列的情况下加入多个数据框
- go - 取int平方根的最佳方法是什么?
- pyinstaller - 使用 PSEXEC 在远程计算机上运行 .exe
- apache-kafka - 如何在命令行中使用具有人类可读时间戳的 Kafka 消息?
- kubernetes - Helm 删除所有早于某个日期的版本,在某个日期之前更新或应用程序版本低于
- python - 向装饰器添加参数会删除 cls 参数
- mesh - ANSYS 网格划分问题 - 如何对复杂几何图形(约 80,000 个面)进行网格划分?
- php - Symfony 3.4 PHP 单元无法猜测内核目录
- wordpress - WPML 根据 wordpress 配置文件设置重定向用户
- html - 找出是什么在改变网站上的样式属性