css - 如何获取 CSS 溢出和高度 :calc to work in a resizable div

Question

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

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

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

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

我在下面的 fiddle 中有一个演示 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:Flex 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;
}