时间戳

首页 > 解决方案 > CSS equal height column

jquery - CSS equal height column

问题描述

How can I force the right column to be same height as the left column (image) in this example using CSS?

https://jsfiddle.net/robtndfy

Top and Bottom div have fixed height while comments are supposed to be scrollable if content height is greater than image height and fill the height until Bottom div if content height is less than image height.

I can solve the problem by adding this jquery code:

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

Comments height is now set to image height minus top and bottom div.

标签： jqueryhtmlcssbootstrap-4

解决方案

最简单的 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

推荐阅读