CODEWITHSUNDEEP
htmlbootstrap-4
vladtf
vladtf

Reputation: 71

Bootstrap Grid Columnd Fit content

I'm using bootstrap 4.4.1.

I've been loking for a responsive list group that will be same height with other components. In the image I want both columns on second row to be same height of image and to hide other list items behind an scrolling group.

Here is the html file : https://jsbin.com/jaqacoq/edit?html,output

    <div class="col-md-8 my-col p-4">
        <img class="img-fluid" src="img3.jpg" alt="Image not Found">
    </div>
    <div class="col-md-4 p-2 my-col">
        <div class="container">
            <div class="row my-row">
                <div class="col my-container">
                    Col 1
                </div>
                <div class="col my-col">
                    Col 2
                </div>
            </div>
            <div class="row my-row">
                <div class="col">
                    <div class="overflow-auto">
                        <div class="">Item 1</div>
                        <div class="">Item 1</div>
                        <div class="">...</div>

                    </div>
                </div>
            </div>
        </div>
    </div>

enter image description here

Expected result, but without using fixed size : Expected

Upvotes: 0

Views: 130

Answers (2)

Tissae DeVrie
Tissae DeVrie

Reputation: 21

Y-overflow don't work without either height or max-height option, so you should specify height of your .comments-block in any units besides percents.

Another approach I can think of: position: fixed all your interface elements and resize/scroll only the central element.

Upvotes: 0

Mark
Mark

Reputation: 783

What you need here is a bit of jQuery to calculate the height of your image so you can set the height of your list group based on that.

With jQuery you can calculate height with .height() Here's an example on how to use it: $('#div2').css('height', $('#div1').height()+'px');

And here's an example with your code that is working: https://www.codeply.com/p/Pv1dwtjQ9E

Upvotes: 1

Related Questions