This question already has answers here:
One flex item sets the height limit for siblings
(4个答案)
8个月前关闭。
我想用CSS网格在两列中显示两个区域。但是,左栏的高度必须与右栏的高度相同。
如果左栏高于右栏,则左栏中的内容应可滚动。
我想实现的目标:
![html - 如何使两列布局具有相等的高度列和一个可滚动的列?-LMLPHP html - 如何使两列布局具有相等的高度列和一个可滚动的列?-LMLPHP]()
我不能没有硬编码高度像素。只有CSS才能做到这一点吗?或者我需要使用JavaScript重新计算左栏的高度?
我附加了jsFiddle来查看。
https://jsfiddle.net/rafalcypcer/2teonuhy/17/
谢谢,
拉法尔
(4个答案)
8个月前关闭。
我想用CSS网格在两列中显示两个区域。但是,左栏的高度必须与右栏的高度相同。
如果左栏高于右栏,则左栏中的内容应可滚动。
我想实现的目标:
我不能没有硬编码高度像素。只有CSS才能做到这一点吗?或者我需要使用JavaScript重新计算左栏的高度?
我附加了jsFiddle来查看。
https://jsfiddle.net/rafalcypcer/2teonuhy/17/
谢谢,
拉法尔
.gridwrapper {
display: grid;
grid-template-columns: 0.5fr 1.5fr;
grid-auto-rows: 200px;
grid-gap: 10px;
grid-template-rows: auto;
}
.column {
background: green;
}
.dynamic-content {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background: pink;
margin: 20px;
}
.list {
overflow-y: auto;
margin: 20px;
height: 100%;
}
.item {
height: 50px;
background: yellow;
border: 2px solid black;
}
<div class="gridwrapper">
<div class="column">
<div class="list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="column">
<div class="dynamic-content">Some dynamic content with random height</div>
</div>
</div>
最佳答案
因为宽度是已知的,所以可以考虑position:absolute
作为内容,这样就不会影响高度,只需使用top:0;bottom:0;
来拉伸它
.gridwrapper {
display: grid;
grid-template-columns: 0.5fr 1.5fr;
grid-auto-rows: 200px;
grid-gap: 10px;
grid-template-rows: auto;
}
.column {
background: green;
position:relative;
}
.dynamic-content {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background: pink;
margin: 20px;
}
.list {
position:absolute;
overflow-y: auto;
margin: 20px;
top:0;
bottom:0;
left:0;
right:0;
}
.item {
height: 50px;
background: yellow;
border: 2px solid black;
}
<div class="gridwrapper">
<div class="column">
<div class="list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="column">
<div class="dynamic-content">Some dynamic content with random height</div>
</div>
</div>