使flex列的高度与其同级列的高度相同 [英] Make a flex column of a height of its sibling column
问题描述
我有两个flex列,其中包含一些内容.我希望第一列的高度始终等于第二列的高度,如果overflow: auto
的内容比另一列的内容多,请使用overflow: auto
.一个重要的注意事项是我不想使用绝对定位.以下是我的追求:
I have two flex columns with some content. I want the first column height to always be equal to the height of the second column, and use overflow: auto
if it has more content than the other column. One important note is that I don't want to use absolute positioning. Below is what I am after:
.cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: auto;
}
.content-1 {
height: 500px;
background-color: green;
}
.content-2 {
height: 150px;
background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="cover">
<div class="content-1"></div>
</div>
</div>
<div class="col">
<div class="content-2"></div>
</div>
</div>
</div>
有没有一种方法可以在没有绝对定位的元素嵌套在第一个col中的情况下实现相同效果?预先感谢.
Is there a way to achieve the same without the absolutely positioned element nested in the first col? Thanks in advance.
推荐答案
这是我在上一个问题中使用的一个想法可以依靠min-height:100%;height:0;
技巧的地方. height:0
将强制该元素不影响容器的高度,而min-height:100%
将强制其等于同级元素定义的高度:
Here is an idea I used in a previous question where you can rely on the min-height:100%;height:0;
trick. The height:0
will force the element to not affect the height of the container and min-height:100%
will force it to be equal to the height defined by the sibling element:
.cover {
height:0;
min-height: 100%;
overflow-y: auto;
}
.content-1 {
height: 500px;
background-color: green;
}
.content-2 {
height: 150px;
background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="cover">
<div class="content-1"></div>
</div>
</div>
<div class="col">
<div class="content-2"></div>
</div>
</div>
</div>
这篇关于使flex列的高度与其同级列的高度相同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!