How to put responsive divs regardless of height size?

Navigation
4

I have a Bootstrap project with 4 divs in each row, side by side behaving responsively. Each of the divs has a certain content. The width of the images will be fixed but the height will not. If one of the images has a height , the rest of the content of the other divs behaves strangely, according to the image:

Isthereanywaytochangethis?Inthebackground,Ipretendthat,regardlessofthesizeoftheheight,thedivsalwayshavethesamedistancebetweenthemasthescreensizedecreases/browser.Atthispoint,ifyouincreasethe%w/wofanimage,thebottomisagiantdistancefromthetop.

Myhtml:

<!DOCTYPEhtml><htmllang="en">

    <head>
        <meta charset="utf-8">
        <title>SmartEvents</title>
        <meta name="description" content="A Tuts+ course">
        <!-- Mobile Specific Meta -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <!-- Custom CSS -->
        <link rel="stylesheet" type="text/css" href="css/custom.css">
    </head>

    <body>
        <div class="container-fluid">
            <div class="content">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento1a.jpg" />
                            <div class="events-cost">Gratuito</div>
                            <div class="events-name">DJ Precatado Tour Smart 2015</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Música</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Meo Arena</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Inscrever-se</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento2.jpg" />
                            <div class="events-cost">20.00€ - 45.00€</div>
                            <div class="events-name">Vinil e K7. Passado e futuro.</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Conferências</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Armazém 77</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Comprar</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento3.jpg" />
                            <div class="events-cost">Gratuito</div>
                            <div class="events-name">Como fazer massa italiana em português</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Restaurante Pasta e pinhões</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Inscrever-se</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento4.jpg" />
                            <div class="events-cost">2.500€</div>
                            <div class="events-name">Windows 28 - Como entrar?</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Chalet suiço Bill Gates</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Comprar</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento3.jpg" />
                            <div class="events-cost">2.500€</div>
                            <div class="events-name">Windows 28 - Como entrar?</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Chalet suiço Bill Gates</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Comprar</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento3.jpg" />
                            <div class="events-cost">Gratuito</div>
                            <div class="events-name">Como fazer massa italiana em português</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Restaurante Pasta e pinhões</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Inscrever-se</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento3.jpg" />
                            <div class="events-cost">Gratuito</div>
                            <div class="events-name">Como fazer massa italiana em português</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Restaurante Pasta e pinhões</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Inscrever-se</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="events-box">
                            <img src="images/evento3.jpg" />
                            <div class="events-cost">Gratuito</div>
                            <div class="events-name">Como fazer massa italiana em português</div>
                            <div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
                            <div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Restaurante Pasta e pinhões</div>
                            <div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
                            <div class="events-action">
                                <button type="button" class="btn btn-success btn-sm">Inscrever-se</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center">
                    <ul class="pagination">
                        <li><a href="#">&laquo;</a>
                        </li>
                        <li class="active"><a href="#">1</a>
                        </li>
                        <li><a href="#">2</a>
                        </li>
                        <li><a href="#">3</a>
                        </li>
                        <li><a href="#">4</a>
                        </li>
                        <li><a href="#">5</a>
                        </li>
                        <li><a href="#">&raquo;</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- /.container -->
        <div class="main-box-footer">
            <div class="content">
                <p class="main-title blue-title">Eventos por categoria.</p>
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Concerto <span class="badge">8</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Gastronomia <span class="badge">12</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Aulas e Workshops <span class="badge">7</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Desporto <span class="badge">15</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Conferências <span class="badge">3</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Cinema <span class="badge">10</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Festival <span class="badge">2</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Negócios <span class="badge">5</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Festas <span class="badge">1</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Artes Performativas <span class="badge">9</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Ciência <span class="badge">6</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <ul class="nav nav-pills" role="tablist">
                            <li role="presentation"><a href="#">Saúde <span class="badge">4</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- Latest compiled and minified JavaScript -->
        <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script><scriptsrc="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script></body></html>

Mycss:

@charset"UTF-8";

/* CSS Document */
 body {
    background-color:#f6f6f6;
    font-family: Arial, Helvetica, sans-serif;
}

/* TEXTOS*/
 h1 {
    font-size:40px;
    color:#FFF;
    background-color: #52b266;
}

.blue-title {
    font-size:35px;
    color:#333c4e;
}

.blue-sub-title, .white-sub-title {
    font-size:22px;
    font-weight:bold;
}

.blue-sub-title {
    color:#333c4e;
}

.white-sub-title {
    color:#fff;
}

/* TEXTOS*/
 .main-title {
    max-width:1130px;
    margin: 0 auto;
    text-align:left;
    margin-top:10px;
    margin-bottom:10px;
}

.main-box-header {
    background:#e6f0f3;
    width:100%;
    height:auto;
    left:0;
    margin:0px;
    padding:10px;
    text-align:center;
}

.main-box-footer {
    background:#e6f0f3;
    height:auto;
    left:0;
    margin:0px;
    padding:10px;
    text-align:left;
}

.content {
    max-width:1130px;
    margin:0 auto;
}

.events-box {
    background:#fff;
    border: 1px solid #CCC;
    max-width:300px;
    height:100%;
    margin:0 auto;
    margin-bottom:20px;
    box-shadow: 0px 0px 8px #888888;
    padding:20px;
}

a:hover {
    text-decoration:none;
}

.events-box img {
    max-width:100%;
    height:auto;
}

.events-cost {
    color:#00a651;
    background:white;
    opacity: 0.9;
    filter: alpha(opacity=90);
    /* For IE8 and earlier */
    font-size:15px;
    text-transform:uppercase;
    margin-top:-20px;
    text-align:center;
    max-width:100%;
}

.events-name {
    font-size:20px;
    font-weight:bold;
    text-align:left;
    margin-top:10px;
}

.events-place {
    font-size:14px;
    text-align:left;
    padding-left:5px;
    margin-top:5px;
    color:#ACACAC;
}

.events-date {
    font-size:14px;
    text-align:left;
    padding-left:5px;
    margin-top:5px;
    color:#ACACAC;
}

.events-cat {
    font-size:18px;
    text-align:left;
    padding-left:5px;
    margin-top:5px;
    color:#666;
}

.events-action {
    max-width:100%;
    text-align:right;
    margin: 0 auto;
    margin-top:5px;
}

.list-categorias {
    width:100%;
    height:auto;
    padding:30px;
    background:#e6f0f3;
}

.badge {
    background-color:#0d1014;
}

.footer {
    background:#333c4e;
    height:200px;
    padding-top:20px;
}

@media screen and (max-width: 400px) {

    .blue-sub-title {
        font-size:14px;
    }

    h1 {
        font-size:20px;
        color:#FFF;
        background-color: #52b266;
    }

    .white-sub-title {
        display:none;
    }

    .events-box {
        width:100%;
        height:auto;
    }

    .events-box img {
        max-width:100%;
    }

    .events-cost {
        max-width:100%;
    }
}
    
asked by anonymous 17.09.2015 / 16:13

2 answers

2

For this to be possible you can use:

Min-height : Assigns the div's the min-height attribute to the highest div value. But I do not recommend using this if the content is manageable.

Ex: 

div {
    border: 1px solid rgb(0, 100, 125);
    display: inline-block;
    min-height: 250px;
    vertical-align: top;
    width: 100px;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus nulla, ut dignissim enim. Integer nun</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus nulla, ut dignissim enim. Integer nunc nulla, ullamcorper id egestas ut, laoreet nec mauris</div>

Assign height to the "container" : If you assign a fixed value to the "parent" or "container" node you can say that daughters will have 100% .

Ex: 

#box {
  height: 250px;
}
.box-item {
  border: 1px solid black;
  display: inline-block;
  height: 100%;
  vertical-align: top;
  width: 200px;
}
<div id="box">
  <div class="box-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus nulla, ut dignissim enim. Integer nun</div>
  <div class="box-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus nulla, ut dignissim enim. Integer nunc nulla, ullamcorper id egestas ut, laoreet nec mauris</div>
</div>

Flex-box : Using the Flexible Box Model you can assign 100% height to the child using the stretch value for .

Ex: 

#box {
  border: 1px solid red;
  display: flex;
  justify-content: stretch;
  align-items: space-around;
}
.box-item {
  border: 1px solid blue;
  width: 50%;
}
<div id="box">
  <div class="box-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus nulla, ut dignissim enim. Integer nun</div>
  <div class="box-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus nulla, ut dignissim enim. Integer nunc nulla, ullamcorper id egestas ut, laoreet nec mauris</div>
</div>

NOTE: This is just a basic example of flex-box , if you want to use it, please read this post and this from CSS tricks and Tableless respectively and use the proper vendor-prefixes (-webkit, -moz, -ms ...). You can view here the current support of this property by browsers.

There are also other solutions, but I recommend that you use some of these.

    
10.10.2015 / 18:56
0

Friend, you could set a Max-height and a Max-width in the dimension of the image, this would not give a problem, or limit the user and always input the image in a specific size.

The CSS properties Max link

    
18.09.2015 / 05:52
How to set column width of Grid View? Git repository repository on local machine and GitHub