Bootstrap 3 Columns with same height

Question

I have a couple of bootstrap col-s and I want them to have the same height. I found this solution https://stackoverflow.com/a/22892773/5798225

This works fine if all panels have height: 100%.

Now I need to have one panel less than height: 100%. The problem is that the other panels are not resized.

Here is an example: https://jsfiddle.net/DTcHh/38657/

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.equal {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.panel {
    height: 100%;
}
.panel-small {
    height: 50%;
    overflow: hidden;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row equal">
        <!--begin panel 1 -->
        <div class="col-xs-4">
            <div class="panel panel-primary panel-small">
                <div class="panel-heading">
                    <h1 class="panel-title">Web y Metrícas</h1>
                </div>
                <!-- end panel-heading -->
                <div class="panel-body">
                    <p>
                        <img src="//placehold.it/120" class="img-responsive center-block">
                    </p>
                    <p class="text-left lead2">Apoyamos estratégicamente la presencia de tu empresa en el mundo digital, a través de la construcción de recursos web atractivos para tus clientes.</p>
                    <ul class="text-left">

                        <li>Data Mining</li>
                    </ul> <a class="btn btn-primary" href="#">Ver más »</a>
                </div>
                <!-- end panel-body -->
            </div>
            <!-- end panel-primary -->
        </div>
        <!--end col-xs-4 -->
        <!-- begin panel 2 -->
        <div class="col-xs-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h1 class="panel-title">Gestíon de Redes Socials</h1>
                </div>
                <!-- end panel-heading -->
                <div class="panel-body">
                    <p>
                        <img src="//placehold.it/120x150" class="img-responsive center-block">
                    </p>
                    <a class="btn btn-primary" href="#">Ver más »</a>
                </div>
                <!-- end panel-body -->
            </div>
            <!-- end panel-primary -->
        </div>
        <!-- end col-xs-4 -->
        <!--begin panel 3 -->
        <div class="col-xs-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h1 class="panel-title">Plan de Medios</h1>
                </div>
                <!-- end panel-heading -->
                <div class="panel-body">
                    <p>
                        <img src="//placehold.it/120" class="img-responsive center-block">
                    </p>
                    <p class="text-left lead2">Trabajamos en conjunto con la empresa.</p>
                    <a class="btn btn-primary" href="#">Ver más »</a>
                </div>
                <!-- end panel-body -->
            </div>
            <!-- end  panel-primary -->
        </div>
        <!-- end col-xs-4 -->
    </div>
    <!-- end row -->
</div>

The first panel has height: 50% the other panels have height: 100%. Now I want the second and third panel to be smaller. The should be as small as their content allows but still share a common height. The first panel can be smaller than the second and third.

How can I achieve this?

So you want the height of all three boxes to be the same as the smallest? — TidyDev, Oct 22 '17 at 10:04
No, I want the second and third to be the same height. The height should be calculated with ignoring the first box. The first box should be smaller. — Rose Nettoyeur, Oct 22 '17 at 10:20
I need this for a animation. The first box goes from height 100% to height 0%. During this animation the second and third box should be resized too. For example if the first box ist a lot more higher than the other boxes the height of the second and third box can be decreased during animation. — Rose Nettoyeur, Oct 22 '17 at 10:23

Bootstrap 3 Columns with same height

0 Answers0