我想在固定大小的溢出div中扩展列的高度。
使用overflow: auto
时,height: 100%
不会展开到滚动的末尾。
在我的JSFiddle中,我希望红色列的大小与蓝色相同。
答案 0 :(得分:1)
正如Blazemonger所说,你可以在溢出的div内的div上使用display: flex
来实现这一点。
<强> HTML 强>
<html>
<body>
<div class="row row-scroll">
<div class="content">
<div class="column blue">
AAA BB CC DD AAA BB CC DD AAA BB CC DD D AAA BB CC DD AAA BB CC DD
</div>
<div class="column red">
BBB
</div>
</div>
</div>
</body>
</html>
<强> CSS 强>
.row-scroll {
height: 130px;
overflow-y: auto;
background-color: gray;
}
.content {
display: flex;
}
请参阅Fiddle
答案 1 :(得分:-1)
解决方案是使用伪元素填充剩余空间。顺便说一下,它比一般的解决方案更像是 hack :
.row-scroll {
height: 130px;
overflow-y: auto;
background-color: gray;
}
.red {
background-color: red;
position:relative;
}
.red:before {
content:"";
position:absolute;
top:100%;
bottom:-1000%;
left:0;
right:0;
background:red;
z-index:0
}
.blue {
background-color: blue;
}
.column {
width: 60px;
float:left;
}
<div class="row row-scroll">
<div class="column blue">
AAA BB CC DD AAA BB CC DD AAA BB CC DD D AAA BB CC DD AAA BB CC DD
</div>
<div class="column red">
BBB
</div>
</div>