html - CSS 2 列，首先定义第二个的最大高度，如果需要将使用滚动

Question

我想要一个双列布局，其中第一列可以根据需要增长，第二列将是第一列高度的 100%，但是如果第一列不够高，无法显示所有第二列的内容，那么这个应该显示滚动条并限制在第一列的高度。

我试过了，但这只有在我为主容器设置固定高度而不是百分比时才有效。

HTML:

<div class="container">
    <div class="column1">Phasellus viverra ac diam nec viverra. Phasellus viverra ac diam nec viverra.</div>
    <div class="column2">Phasellus viverra ac diam nec viverra. Aliquam gravida ante at est laoreet pulvinar. Vestibulum scelerisque ut quam nec semper. Duis porta aliquam velit in porttitor.</div>
</div>

CSS:

.container {
    height: 150px;
}
.column1, .column2 {
    float: left;
    width: 50%;
}
.column2 {
    color: red;
    overflow: auto;
    height: 100%;    
}

https://jsfiddle.net/r4hdcwy2/

非常感谢您的建议!

Answer 1

您需要做的是使第 2 列的位置成为绝对位置，因此它的高度是相对于父列的高度。

如果第一列的高度增加，第二列将随之增加。如果第 1 列的高度小于第 2 列的高度，第 2 列将保持父 div 的高度，默认为 150px。

这是一个工作示例:

.container {
    height: 150px;
    position:relative;
    display: table;
}
.column1, .column2 {
    float: left;
    width: 50%;
}
.column2 {
    color: red;
    overflow: auto;
    position:absolute;
    height:100%;
    right: 0;
}

<div class="container">
    <div class="column1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula nisi lobortisctetur adipiscing elit. Suspendisse vehicula nisi lobortisod urna, eget placerat nulla. D purus sed ultrices viverra. Sed tincidunLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula nisi lobortisctetur adipiscing elit. Suspendisse vehicula nisi lobortisod urna, eget placerat nulla. D purus sed ultrices viverra. Sed tincidunt euismod urna, eget placerat nulla. Donec consequat facilisis venenatisLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula nisi lobortisctetur adipiscing elit. Suspendisse vehicula nisi lobortisod urna, eget placerat nulla. D purus sed ultrices viverra. Sed tincidunt euismod urna, eget placerat nulla. Donec consequat facilisis venenatisLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula nisi lobortisctetur adipiscing elit. Suspendisse vehicula nisi lobortisod urna, eget placerat nulla. D purus sed ultrices viverra. Sed tincidunt euismod urna, eget placerat nulla. Donec consequat facilisis venenatist euismod urna, eget placerat nulla. Donec consequat facilisis venenatis. </div>
    <div class="column2">Phasellus viverra ac diam nec viverra. Aliquam gravida ante at est laoreet pulvinar. Vestibulum scelerisque ut quam nec semper. Duis porta aliquam velit in porttitor. Phasellus lacinia rutrum volutpat. Sed aliquam blandit velit, vitae lacinia risus imperdiet quis. Curabitur eu tincidunt risus. Sed nec nulla neque. Donec porta tellus lectus, sit amet interdum mi porttitor eget. Vivamus ac ullamcorper ante. Pellentesque consequat, arcu vitae lacinia aliquam, lectus eros fringilla ex, sit amet varius felis elit eget nulla. Maecenas egestas eleifend purus, a cursus lorem tempor quis. Integer sit amet lectus lobortis, iaculis arcu nec, sodales massa. Nullam metus urna, sollicitudin non pharetra quis, hendrerit vel sapien. Donec quis lectus lobortis, egestas quam lobortis, cursus ante. </div>
</div>