代码之家 › 专栏 › 技术社区 › ekjcfn3902039

如何使CSS溢出和高度:计算在可调整大小的分区中工作

vue.js css

ekjcfn3902039 · 技术社区 · 5 年前

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

我正试图把这个分区分成3个逻辑部分。我想拥有

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

我很难把中间部分放在它自己的空间里。不管我做什么,它似乎都会溢出来。在中间DIV的样式中添加一个溢出:auto和height:calc(100%-topheight+bottomheight)并不像预期的那样工作。作为额外的奖励,我不确定是否知道父DIV的高度,因为它们可以根据网格布局/网格项组件进行调整和计算。

我在下面的小提琴上做了个示范 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>',

1 回复 | 直到 5 年前

Scrimothy 5 年前

你可以用 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;
}

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前