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

你需要做的是使第二列的位置绝对，所以它的高度是相对于父级的。

如果第1列的高度增加，第2列将相应地跟随。如果第一列的高度比第二列的高，则第二列将保持父div的高度，默认为150px。

这是一个有效的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: