Question

在使用CSS的示例中，如何强制右列与左列（图像）的高度相同？

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

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

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

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

Answer 1

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

如果要保持整洁，请将所有内容放置在具有两列的表中，这样就不必担心东西会浮动（至少有些奇怪）。

Answer 2

最简单的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中。行应仅包含列，并且内容应放置在列内。

相关：Bootstrap 4 Vertical Align Between 2 Divs - Flex

CSS等高列

2 个答案: