这是一个非常简单的结构,我可以不使用Flexbox的实现。质朴Flexbox的高度
我有一个报头和主体我有一个长(高)元件内的主体元件和后,我有身体内的小页脚。我希望内容可以滚动并且页脚始终可见。
我将所有的东西都设置为使用flexbox,我使用flex-direction: column
来实现垂直定位,以及flex: 1
使用高度未定义的元素占据剩余空间。
奇怪的是,我固定高度为50像素的标头只有20像素高,内容根本不可滚动,或者更确切地说,它与小小的页脚(绿色)并不是我想要的。 ..
.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; }
<div class="flex col" style="height: 100vh;">
<div class="red h50">
Wtf?
</div>
<div class="blue flex1 pad">
<div class="flex col" style="height: 100%">
<div class="yellow flex1" style="overflow: auto;">
<div style="height: 1500px">
Long content here
</div>
</div>
<div class="green h50">
</div>
</div>
</div>
</div>
它仍然是同样的结果,一切都是滚动的页眉和页脚应该是静态的,只有黄色区域应该是滚动 –
@php_nub_qq在上面的代码片段在视口中的黄色滚动(正在使用Chrome的BTW),所以它是如何同你? – LGSon
哦,所以这是一个浏览器的问题,我使用的Firefox ...而且在铬是一样的,没有工作..耶稣 –