Making column same height as div beside it

Asked Jul 12 '18 at 13:37

Active Jul 12 '18 at 14:04

Viewed 59 times

I have the following html code.

<div class="panel" style="background-color: #e6e6e6">
        <div class="col-sm-9">
            <video id="currentVideo" src="{{currentVideo.Source}}" width="100%" height="auto" controls style="margin: 5px">
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="col-sm-3" style="overflow-y: scroll;">
            <div ng-repeat="video in videoHelpFiles" style="margin: 5px">
                <button class="btn btn-primary" ng-click="showVideo(video)" style="width: 100%; white-space: normal; padding: 5%">
                    <h4 style="text-align:center; margin: 4px 0px;"> {{video.Title}} </h4>
                </button>
            </div>
        </div>
    </div>

There's some styling in here too which I want to eventually move but leaving here until I get it how I want it. Basically all I want to do is have the col-sm-3 div be the same height as the sol-sm-9 height and would like the buttons in the col-sm-3 div to use 100% height of the div they're in. I've tried using height='100%' and a few things like that with no luck. Any help would be greatly appreciated.

edited Jul 12 '18 at 14:04

j08691

204,283
31
260
272

asked Jul 12 '18 at 13:37

John O C

Sounds like a job for `display:flex`. – Niet the Dark Absol Jul 12 '18 at 13:38
1

Are you using Bootstrap? – j08691 Jul 12 '18 at 13:38
what version of bootstrap do you use? – לבני מלכה Jul 12 '18 at 13:40
@NiettheDarkAbsol tried flex too but couldn't get it to work right for some reason – John O C Jul 12 '18 at 13:45
@j08691 yes I am – John O C Jul 12 '18 at 13:45
3.3.5 @לבנימלכה – John O C Jul 12 '18 at 13:46
change to the v4 and you can do it – Temani Afif Jul 12 '18 at 13:47
duplicate of : https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – Temani Afif Jul 12 '18 at 13:48
@TemaniAfif unfortunately I can't update – John O C Jul 12 '18 at 13:48
This has already been answered here [duplicated question](https://stackoverflow.com/questions/2997767/how-do-i-keep-two-side-by-side-divs-the-same-height) – Jul 12 '18 at 13:50

Making column same height as div beside it

0 Answers0