如何让 CSS 溢出和高度：计算在可调整大小的 div 中工作

Question

我正在使用 vue-grid-layout，它提供了 x 个 div。每个 div 都可以通过拖动其右下角的图标来调整大小。

我正在尝试将 div 拆分为 3 个逻辑部分。我想拥有

• 固定高度的顶部，
• 一个可变的中间部分，和
• 固定高度的底部

我无法将中间部分包含在它自己的空间中。无论我做什么，它似乎都会溢出。向中间 div 的样式添加 overflow:auto 和 height:calc(100%-topHeight+bottomHeight) 似乎没有按预期工作。作为额外的奖励，我不确定我是否知道父 div 的高度，因为它们可以调整大小并根据 grid-layout/grid-item 组件计算得出。

我在下面的小提琴中有一个演示 https://jsfiddle.net/uglyhobbitfeet/gs2qf3t6/1/

下面是我要开始工作的主要代码块。

'            <v-layout secondary>',
'              <v-flex xs12>',
'                <div style="height:25px;background-color:green">TOP</div>',
'              </v-flex>',
'              <v-flex xs12 style="height:calc(100%-50px);overflow:auto;">',
'                <div style="height:125px;background-color:blue">MIDDLE</div>',
'              </v-flex>',    
'              <v-flex xs12>',
'                <div style="height:25px;background-color:red">BOTTOM</div>',
'              </v-flex>',
'            </v-layout>',

Answer 1

您可以使用Flexbox 或Grid 布局来实现此目的。两者的标记是相同的，并且都不依赖于已知的高度或计算。

HTML

<div class="container">
  <header>Header</header>
  <div class="body">
    <div class="body-content">Body</div>
  </div>
  <footer>Footer</footer>
</div>

选项 1：弹性 CSS

.container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.body {
  flex: 1 1 auto;
  overflow: auto;
}

header,
footer {
  flex: 0 0 auto;
}

选项 2：网格 CSS

.container {
  display: grid;
  grid-template:
    "header" auto
    "body" 1fr
    "footer" auto;
}

.body {
  overflow: auto;
}