Html 绝对定位容器中的等挠性柱高度

代码笔在这里：

我绝对定位了

div.container

<代码>div.wrapper在其内部。在

div.wrapper

中有两个div作为弹性列。这些专栏都有背景

如何使这些背景移到最长列的末尾（即使它们具有相同的高度），而不仅仅移到容器的可见高度？我无法从

div.container

中删除

position:absolute

这是HTML代码：

<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>

---

删除

容器上的flex属性

我还删除了

对齐项：拉伸；宽度：100%来自
.wrapper
，因为它是它们的默认值，不需要设置


.container{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
/*注释掉这两行
显示器：flex；
弯曲方向：立柱；
*/
溢出：自动；
}
.包装纸{
最小高度：100%；
显示器：flex；
/*注释掉这两行，因为它们不需要
对齐项目：拉伸；
宽度：100%；
*/
}
.1分部{
背景颜色：黄色；
}
.第2分部{
弹性：1；
背景颜色：绿色；
}
p{
填充：20px 10px；
}

这里有一些很长的内容

这里有一些很长的内容

这里有一些很长的内容

有些人甚至不再满足于此

有些人甚至不再满足于此

有些人甚至不再满足于此

有些人甚至不再满足于此

有些人甚至不再满足于此

有些人甚至不再满足于此

有些人甚至不再满足于此

有些人甚至不再满足于此

删除
容器上的flex属性

我还删除了
对齐项：拉伸；宽度：100%来自
.wrapper
，因为它是它们的默认值，不需要设置


.container{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
/*注释掉这两行
显示器：flex；
弯曲方向：立柱；
*/
溢出：自动；
}
.包装纸{
最小高度：100%；
显示器：flex；
/*注释掉这两行，因为它们不需要
对齐项目：拉伸；
宽度：100%；
*/
}
.1分部{
背景颜色：黄色；
}
.第2分部{
弹性：1；
背景颜色：绿色；
}
p{
填充：20px 10px；
}

这里有一些很长的内容

这里有一些很长的内容

这里有一些很长的内容

有些人甚至不再满足于此

有些人甚至不再满足于此

有些人甚至不再满足于此

有些人甚至不再满足于此

有些人甚至不再满足于此

有些人甚至不再满足于此

有些人甚至不再满足于此

有些人甚至不再满足于此

您需要从容器样式中删除
display:flex
和
flex direction:column
，您的包装器已经有flex-updated-codepen谢谢您，Kejt。但是现在，如果内容很短（它是动态的），它将不会占用所有可用空间，如下所示：。有没有办法保持此功能？您可以尝试添加
min height:100vh
对于您的容器和包装器，您需要从容器样式中删除
display:flex
和
flex direction:column
，您的包装器已经有flex更新的codepen谢谢您，Kejt。但是现在，如果内容很短（它是动态的），它将不会占用所有可用空间，如下所示：。有没有办法保持此功能？您可以尝试添加
min height:100vhmin height
方面存在缺陷。你需要它来做IE吗？谢谢！不，IE现在不重要：）现在如果我删除flex并且内容很短，那么这两列就不会占据整个页面的高度。这也是必要的。是否有办法保留此功能？@greenRed是的，我更新了答案。它适用于除IE之外的所有产品，因为IE在
min height
方面存在缺陷。你需要它来做IE吗？谢谢！不，暂时不要紧：）
.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;
}