具有滚动的固定布局上的可变尺寸

Question

我遇到了与我正在处理的网页有关的问题。页面的基本概念是它是一个项目列表，您单击一行以进入该项目的详细信息页面，相当直接。我的问题在于CSS

基本上，页面上几乎所有内容都是静态的（不会滚动），只是表格中的内容会滚动（是的，我隐藏了滚动条）。我能够用positin:fixed;来完成这个任务，但现在我遇到了问题。

每个类别都有自己的带有表格的页面（类别是左侧的链接）。有些类别需要在顶部有额外的按钮，比如第二排蓝色药丸按钮。问题是第二行按钮使顶部区域变大，因此表格必须更小。但是，由于页面的大部分是position:fixed;，因此滚动表的大小基于其周围固定区域的大小，使用`height：calc（100vh - 170px）;＆＃39;但是当有第二排按钮时，170px不再有效。

所以这就是问题：有没有办法通过带有可变大小的按钮行的纯css来完成所需的滚动行为？

我尝试了几件包括flexbox在内的东西，但最终我似乎无法使用calc函数设置表体的高度。

Answer 1

听起来你需要的是flexbox。您有一个标题部分，基本上确定内容部分的高度。具有增长/收缩参数的Flex列可实现此目的。

<div class="container">
  <div class="header">
    Header content<br>
    This will keep expanding in height.
  </div>
  <div class="content">
    The height of this black content box depends on the height of the header above.
  </div>
</div>

{{1}}