我已经绝对定位div.container
。 div.wrapper
在里面。和两个 div 作为 div.wrapper
中的 flex 列。这些列有背景。
我怎样才能使这些背景到达最长列的末尾(即使它们具有相同的高度)而不仅仅是容器的可见高度?我无法从 div.container
中删除 position: absolute
。
.container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: flex;
flex-direction: column;
overflow: auto;
}
.wrapper {
display: flex;
align-items: stretch;
width: 100%;
}
.div1 {
background-color: yellow;
}
.div2 {
flex: 1;
background-color: green;
}
<div class="container">
<div class="wrapper">
<div class="div1">
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
</div>
<div class="div2">
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
</div>
</div>
</div>
最佳答案
删除 container
上的 flex 属性。
我还删除了 align-items: stretch; width: 100%;
来自 .wrapper
因为它是它们的默认值,不需要设置。
.container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* commented out these 2 lines
display: flex;
flex-direction: column;
*/
overflow: auto;
}
.wrapper {
min-height: 100%;
display: flex;
/* commented out these 2 lines as they are not needed
align-items: stretch;
width: 100%;
*/
}
.div1 {
background-color: yellow;
}
.div2 {
flex: 1;
background-color: green;
}
p {
padding: 20px 10px;
}
<div class="container">
<div class="wrapper">
<div class="div1">
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
</div>
<div class="div2">
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
</div>
</div>
</div>
关于html - 如何使我的 flex 列在绝对定位的容器中具有相同的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45914765/