1

这不是重复的，因为这里的答案，CSS3 Flexbox full-height app and overflow和Flexbox and vertical scroll in a full-height app using NEWER flexbox api只有一半，两者结合不会产生正确的结果。

在此处输入图像描述

目前我已经通过 JavaScript 完成了这项工作，我已经计算了容器的宽度/高度并根据对接标准进行了划分。

我已经尝试使用这两个答案，但我不知道如何制作这种布局，因为我对 flexbox 的了解很少，我已经阅读了谷歌搜索第一页上的每篇文章，但看起来 flexbox 方向只能在一个方向上工作，要么你可以按行或按列创建灵活的框。

<div class="dock-panel">
   <div class="dock-top" style="height:30px">Header</div>
   <div class="dock-left" style="width:200px">Tree View</div>
   <div class="dock-fill">Nested Fill Element</div>
   <div class="dock-right" style="width:100px">Status Panel</div>
   <div class="dock-bottom" style="height:30px">Footer</div>
</div>

我在这里定义内联样式的原因是因为我正在创建一组对停靠有用的类，其他用户将导入该 CSS，并将根据他们的需要在不同或内联 CSS 中编写高度/宽度。所以我事先不知道高度/宽度。

类停靠填充应该使用所有可用空间，如果我调整我的窗口大小，除了停靠填充所有东西都应该停靠并且只有一个大小参数应该调整大小，例如，在顶部，高度保持不变，但宽度为 100%。

我可以通过在容器中添加容器来做到这一点，但这会破坏我们的 UI 层次结构。

4

0 回答 0