How do I keep two div the same height for any device?

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body { padding: 0; margin: 30px 0 30px 0; background: yellow; }
.textbox-text {  background: #fff; color: #000; padding: 15px; margin-bottom: 30px; }
.textbox {  border: 1px solid #000; margin-bottom: 30px; }

#test .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;  display: flex;}
#test .row > [class*='col-'] {display: flex;flex-direction: column; background: #fff;margin: 0 15px;}
#test .column{ padding: 15px;}
</style>

</head>
<body>
     
     <div id="projects">
        <div class="container">
            <div class="row">
                
                <div class="col-sm-4">
                    <div class="textbox">
                        <div class="textbox-image">
                            <img src="http://placehold.it/350x150" class="img-responsive">
                        </div>
                        <div class="textbox-text">
                            <p>
                                    Many users already have downloaded Bootstrap.
                            </p>
                        </div>
                        <div class="textbox-button text-center">
                            <button type="button" class="btn btn-primary">Read more</button>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="textbox">
                        <div class="textbox-image">
                            <img src="http://placehold.it/350x150" class="img-responsive">
                        </div>
                        <div class="textbox-text">
                            <p>
                                    Many users already have downloaded Bootstrap from MaxCDN when.
                            </p>
                        </div>
                        <div class="textbox-button text-center">
                            <button type="button" class="btn btn-primary">Read more</button>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="textbox">
                        <div class="textbox-image">
                            <img src="http://placehold.it/350x150" class="img-responsive">
                        </div>
                        <div class="textbox-text">
                            <p>
                                    Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site. Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site.<br><br>
                                    t will be loaded from cache when they visit your site.
                            </p>
                        </div>
                        <div class="textbox-button text-center">
                            <button type="button" class="btn btn-primary">Read more</button>
                        </div>
                    </div>
                </div>

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

    <div class="container" id="test">
        <div class="row">
            <div class="col-sm-4 ">
                <div class="textbox-image ">
                    <img src="http://placehold.it/350x150" class="img-responsive">
                </div>
                <div class="column">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </div>
            </div>
            <div class="col-sm-4 ">
                <div class="textbox-image">
                    <img src="http://placehold.it/350x150" class="img-responsive">
                </div>
                <div class="column">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                </div>
            </div>
            <div class="col-sm-4 ">
                <div class="textbox-image">
                    <img src="http://placehold.it/350x150" class="img-responsive">
                </div>
                <div class="column">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </div>
            </div>

        </div>
    </div>
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.textbox .textbox-text');
});


$(window).resize(function(){
  equalheight('.textbox .textbox-text');
});
</script>

</body>
</html>

Check in JsFiddle:

http://jsfiddle.net/nV3Ua/1821/


1 thought on “How do I keep two div the same height for any device?

Leave a Comment