Question

这是一个非常简单的结构，我无法使用flexbox实现。

我有一个标题和身体内部的身体元素我有一个长（高）元素，然后我在体内有一个小的页脚。我希望内容可滚动，页脚始终可见。

我将所有内容都设置为使用flexbox，我使用)来实现垂直定位，并使用flex-direction: column来占用具有未定义高度的元素的剩余空间。

奇怪的是，我的标题固定高度为50像素只有20像素高，内容根本不可滚动，或者更确切地说它是与小页脚（绿色）一起，这不是我想要的...

flex: 1

.flex { display: flex; }
.flex1 { flex: 1; }
.col { flex-direction: column; }
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.yellow { background-color: yellow; }
.pad { padding: 10px 15px; }
.h50 { height: 50px; }

Answer 1

使用高度和百分比将Flexbox与内部元素相结合并不是一个好主意，因为它会在浏览器中产生问题。

一直使用Flexbox，在这里更新这两个元素类，我删除height: 100%并将flex添加到blue，以便其子级填充其父级高度，{ {1}}对孩子这样填充其父宽度。

flex1

还将<div class="blue flex1 pad flex"> <div class="flex flex1 col">添加到margin: 0

Stack snippet

body

body { margin: 0; }
.flex { display: flex; }
.flex1 { flex: 1; }
.col { flex-direction: column; }
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.yellow { background-color: yellow; }
.pad { padding: 10px 15px; }
.h50 { height: 50px; }

根据评论更新，其中Firefox似乎需要<div class="flex col" style="height: 100vh;"> <div class="red h50"> Wtf? </div> <div class="blue flex1 pad flex"> <div class="flex flex1 col"> <div class="yellow flex1" style="overflow: auto;"> <div style="height: 1500px"> Long content here </div> </div> <div class="green h50"> </div> </div> </div> </div>元素上的min-height: 0。

对于弹性项目，其默认blue值为min-height/width，这可防止它们缩小到其内容的大小以下，因此更改为auto可解决此问题。

Stack snippet

body { margin: 0; }
.flex { display: flex; }
.flex1 { flex: 1; }
.col { flex-direction: column; }
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.yellow { background-color: yellow; }
.pad { padding: 10px 15px; }
.h50 { height: 50px; }
.mh  { min-height: 0; }

时髦的flexbox高度

1 个答案: