0

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.

whyguy
  • 784
  • 7
  • 11

2 Answers2

2

The simplest CSS method is to use a position:absolute container inside the right column.

<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

If you want just the comments section scrollable use flexbox on the absolute container: https://www.codeply.com/go/eMxTl1mB12

Also note, the "top" and "bottom" content shouldn't be placed directly in the .row. Rows should only contain columns, and the content should be placed inside the columns.

Related: Bootstrap 4 Vertical Align Between 2 Divs - Flex

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • thanks @zim this was exactly what I was looking for meanwhile I was working on this and was able to solve it by positioning bottom and comments using `absolute` https://jsfiddle.net/L8hg9t3n – whyguy Apr 09 '19 at 13:27
1

In my opinion, the easiest way to handle this would be to place both columns within a parent div that has a max-height property as well as overflow: hidden set. From there set the left column to height: 100%;. Set the right column height to equal 100%, for example give both the top and bottom divs to height: 20%; each and the middle section to height: 60%;.

If you want to keep things even tidier, place everything in a table with two columns, that way you don't have to worry about things floating weird (at least somewhat).

haag1
  • 352
  • 1
  • 13
  • any idea how tables will solve this problem? I tried using tables in this example: https://jsfiddle.net/43op2kjd still couldn't figure it out – whyguy Apr 09 '19 at 12:51
  • Taking a look at your fiddle, it looks like you aren't doing anything that I suggested. The recommendation to use tables isn't another solution, it is just an addition to my prior solution. You have `max-width` set multiple times but I don't see `max-height` set anywhere. – haag1 Apr 09 '19 at 12:53
  • ah I see... I don't want to set dynamic height to top and bottom divs as the image might have different sizes – whyguy Apr 09 '19 at 13:00
  • @whyguy if you don't want to set dynamic height because you don't know what the image size may be then what do you want to do? That is literally what dynamic values are for, for when you don't know a definition. – haag1 Apr 09 '19 at 13:02