CSS equal height column

Question

如何使用

CSS强制右列与本例中的左列(图像(高度相同？

https://jsfiddle.net/robtndfy

顶部和底部div 具有固定高度，而如果内容高度大于图像高度，注释应该是可滚动的，如果内容高度小于图像高度，则填充高度直到底部div。

我可以通过添加这个jquery代码来解决问题：

$('.comments').css('height', $('.image').height() - 160);

注释高度现在设置为图像高度减去顶部和底部div。

Answer 1

最简单的CSS方法是在右列中使用position:absolute容器。

<div class="container-fluid">
    <div class="row my-5 mx-auto border" style="max-width: 950px;">
        <div class="col-auto p-0" style="max-width: 600px;">
            <img class="image" src="..." style="width: 100%;">
        </div>
        <div class="col px-0 overflow-auto" style="width: 348px; background: #e3e3e3;">
            <div class="position-absolute px-2 w-100">
                <div class="row" style="height: 80px; background: red;">
                    <div class="col">
                        <p>Top</p>
                    </div>
                </div>
                <div class="row comments" style="overflow-y: auto;">
                    <div class="col">
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                    </div>
                </div>
                <div class="row" style="height: 80px; background: red;">
                    <div class="col">
                        <p>Bottom</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/j4qHjRasDH

如果您只想滚动评论部分，请在绝对容器上使用 flexbox：https://www.codeply.com/go/eMxTl1mB12

另请注意，"顶部"和"底部"内容不应直接放置在.row中。行应仅包含列，内容应放置在列内。

---

相关： 引导 4 在 2div 之间垂直对齐 - flex

Answer 2

在我看来，处理此问题的最简单方法是将两列都放在具有max-height属性和overflow: hidden集的父div 中。从那里将左列设置为 height: 100%; .将右列高度设置为等于 100%，例如，将顶部和底部div 分别height: 20%;，将中间部分设置为height: 60%;。

如果你想让事情更整洁，把所有东西都放在一个有两列的表格中，这样你就不必担心事情漂浮得很奇怪(至少在某种程度上(。