小编The*_*mic的帖子

使 flexbox 中间部分滚动,容器不会占用 100% 的页面

让 flexbox 孩子拥有一个滚动条而不是增长,需要一个具有固定高度的容器。易于在隔离环境中创建:

 #container {
  height: 100%;
  display: flex;
  flex: 0 0 auto;
  flex-flow: column;
}

#list {
  display: flex;
  flex-flow: column;
  overflow: auto;
}
Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/1yjk5ojp/

但假设我想使用页眉。我不知道它的确切大小,所以我不能对合并使用绝对位置。我也不能在此过程中使用任何 flex 组件,因为它必须是固定大小的。

例如 - 添加了一个 100px 的标题

<div style="height: 100px;">
  <h1>Page header</h1>
</div>
Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/z6dsq822/1/

在未知大小的组件之后,我可以做些什么来制作固定高度的组件?

我的限制是我不想要另一个滚动条,并且我希望标题位于此结构之外(这是一个具有不同视图的大型应用程序,标题位于模板中)

css flexbox

2
推荐指数
1
解决办法
1380
查看次数

标签 统计

css ×1

flexbox ×1