如何获得CSS溢出&；高度：计算以在可调整大小的div中工作

我使用的是vue网格布局，它提供x个div。通过拖动右下角的图标，可以调整每个div的大小

我试图将div分成3个逻辑部分。我想要

• 固定高度的顶部部分
• 可变中间部分，以及
• 固定高度的底部

我无法将中间部分包含在它自己的空间中。不管我做什么，它似乎都会溢出来。在中间div的样式中添加overflow:auto和height:calc（100%-topHeight+bottomHeight）似乎并不像预期的那样有效。另外，我不确定是否知道父div的高度，因为它们是可调整大小的，并且是根据网格布局/网格项组件计算的

我在下面的小提琴上有一个示范

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

'            <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>',

”，
'              ',
"顶",，
'              ',
'              ',
“中间”，
'              ',    
'              ',
"底部",，
'              ',
'            ',

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

HTML 选项2：网格CSS

---

你的小提琴有个错误。您需要在计算中添加空格：

height:calc（100%-50px）我的建议是将flex添加到v-layout:
display:flex；弯曲方向：立柱；身高：100%您好，很接近，但仍有一些问题。我希望前3个框有滚动条，最后一个缩小，这样就没有灰色空间。更新的例子在这里嗨，我把你的建议添加到提琴上了，但它似乎仍然不正确。请仔细检查我是否按照你的建议输入了它。您的结构比我的简单示例嵌套得更深。你只需要一直跟踪它，直到所有需要flex的东西都有了。如果我在中间添加另一个div，并在那里设置高度，现在似乎可以工作了。
<div class="container">
  <header>Header</header>
  <div class="body">
    <div class="body-content">Body</div>
  </div>
  <footer>Footer</footer>
</div>

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

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

header,
footer {
  flex: 0 0 auto;
}

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

.body {
  overflow: auto;
}