javascript - 如何使用 CSS 制作一个带有填充的可变长度菜单，该菜单可以延伸到屏幕底部？

Question

情况是这样的:我有一个菜单，其中包含一定数量的固定长度内容，后跟一定数量的可变长度可滚动内容。我想让可变长度部分的最大高度延伸到屏幕底部减去 x 填充量。举个形象的例子:

-----
Menu bar  - 40px
-----
* x px padding
*
| 32px top content
*
*
|
|
| ?px - variable length
|
|
*                        
* x px - padding

HTML 结构是这样的:

<div class="menu-bar">
  <div class="menu">
    <div class="menu-button"></div>
    <div class="menu-content">
      <div class="header-content"></div>
      <div class="variable-length-content"></div>
    </div>
  </div>
</div>
<div class="main-document">
  ...
</div> 

菜单本身是菜单栏的子项，但它绝对定位在文档主体中，顶部是菜单栏高度 + 填充量。

执行此操作的最佳方法是什么？我可能可以使用 Javascript 来完成，但我想知道是否有仅 CSS 的方法。

Answer 1

我不确定您要找什么，这对您有帮助吗？

.content {
  /* Subtract the header size */
  height: calc(100% - 50px);
}

更多信息:https://css-tricks.com/a-couple-of-use-cases-for-calc/