3

Tenho 3 divs em uma row, mas algumas ficam com alturas diferentes de acordo com o conteúdo da div.

Como padronizar a altura das div. (não quero fixar altura e sim que sejam da mesma altura.)

Meu html:

<div class="row-services-1">
    <div class="container">
        <div class="row row-same-height">
            <div class="col-md-12">
                <div class="wprt-spacer clearfix" data-desktop="70" data-mobi="60" data-smobi="60" style="height:70px"></div>
            </div><!-- /.col-md-12 -->                                        

            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/5-1506976704.jpg&amp;w=1920&amp;h=600" alt="PINTURAS / TEXTURAS" title="PINTURAS / TEXTURAS">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">PINTURAS / TEXTURAS</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de Pinturas e Texturas
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->


            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/6-1506976743.jpg&amp;w=1920&amp;h=600" alt="TELHADO" title="TELHADO">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">TELHADO</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de telhados
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->


            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/4-1506976664.jpg&amp;w=1920&amp;h=600" alt="ASSENTAMENTO / REVESTIMENTOS" title="ASSENTAMENTO / REVESTIMENTOS">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">ASSENTAMENTO / REVESTIMENTOS</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de Assentamentos de revestimentos
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px">
                </div>
            </div><!-- /.col-md-4 -->
        </div>

        <div class="row row-same-height">
            <div class="col-md-12">
                <div class="wprt-spacer clearfix" data-desktop="70" data-mobi="60" data-smobi="60" style="height:70px"></div>
            </div>
        <!-- /.col-md-12 -->                                        

            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/2-1506976574.jpg&amp;w=1920&amp;h=600" alt="ADEQUAÇÃO HIDRÁULICA" title="ADEQUAÇÃO HIDRÁULICA">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">ADEQUAÇÃO HIDRÁULICA</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de adequação Hidráulica
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->


            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/3-1506976625.jpg&amp;w=1920&amp;h=600" alt="ALVENARIAS / CONCRETAGEM" title="ALVENARIAS / CONCRETAGEM">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">ALVENARIAS / CONCRETAGEM</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de alvenarias e concretagem
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->


            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/1-impermeabilizacao-1506976478.jpg&amp;w=1920&amp;h=600" alt="Impermeabilização" title="Impermeabilização">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">Impermeabilização</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de Impermeabilização
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->
        </div>                                   
    </div><!-- /.container -->
</div>

inserir a descrição da imagem aqui

2
  • Coloca uma amostra do código dessas 3 divs.
    – Sam
    3/10/2017 às 20:52
  • adicionei o html
    – Jardel
    3/10/2017 às 21:22

2 Respostas 2

2

Uma solução (embora não esteja na lista de tags da pergunta) seria uma função jQuery:

<script>
$(window).on("load resize", function(){
    div_inner = $(".wprt-image-box.has-shadow .item .inner");
    if(div_inner.eq(0).width() >= window.innerWidth/2){
        div_inner.css("height","auto");
    }else{
        max_height = 0; div_col = 3; contador = 1; loop = 1;
        div_inner.css("height","").each(function(){
            if($(this).height() > max_height){
                max_height = $(this).height();
            }
            if(contador == div_col){
                for(x=(div_col*loop)-div_col;x<div_col*loop;x++){
                    div_inner.eq(x).css("height",max_height+"px");
                }
                max_height = 0; contador = 1; loop++;
            }else{
                contador++;
            }
        });
    }
});
</script>

O script acima iguala o height de todas as div .item pela que tiver maior height em cada linha.

$(window).on("load resize", function(){
	div_inner = $(".wprt-image-box.has-shadow .item .inner");
	if(div_inner.eq(0).width() >= window.innerWidth/2){
		div_inner.css("height","auto");
	}else{
		max_height = 0; div_col = 3; contador = 1; loop = 1;
		div_inner.css("height","").each(function(){
			if($(this).height() > max_height){
				max_height = $(this).height();
			}
			if(contador == div_col){
				for(x=(div_col*loop)-div_col;x<div_col*loop;x++){
					div_inner.eq(x).css("height",max_height+"px");
				}
				max_height = 0; contador = 1; loop++;
			}else{
				contador++;
			}
		});
	}
});
.wprt-image-box.has-shadow { margin: 0 -15px; }
.wprt-image-box.has-shadow .item { padding: 0px 15px 30px; }
.wprt-image-box.has-shadow .item .inner { background-color: #fff; -webkit-box-shadow: 0px 5px 300px 0px rgba(0,0,0,0.07); -moz-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.07); box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.07); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row-services-1">
                    <div class="container">

                            <div class="row row-same-height">
                            	<div class="col-md-12">
                                	<div class="wprt-spacer clearfix" data-desktop="70" data-mobi="60" data-smobi="60" style="height:70px">
                                    </div>
								</div><!-- /.col-md-12 -->                                        

                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/5-1506976704.jpg&amp;w=1920&amp;h=600" alt="PINTURAS / TEXTURAS" title="PINTURAS / TEXTURAS">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">PINTURAS / TEXTURAS</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de Pinturas e Texturas                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->


                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/6-1506976743.jpg&amp;w=1920&amp;h=600" alt="TELHADO" title="TELHADO">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">TELHADO</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de telhados                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->


                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/4-1506976664.jpg&amp;w=1920&amp;h=600" alt="ASSENTAMENTO / REVESTIMENTOS" title="ASSENTAMENTO / REVESTIMENTOS">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">ASSENTAMENTO / REVESTIMENTOS</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de Assentamentos de revestimentos nossos serviços de Assentamentos de revestimentos                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->
                                                </div><div class="row row-same-height"><div class="col-md-12"><div class="wprt-spacer clearfix" data-desktop="70" data-mobi="60" data-smobi="60" style="height:70px"></div></div><!-- /.col-md-12 -->                                        

                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/2-1506976574.jpg&amp;w=1920&amp;h=600" alt="ADEQUAÇÃO HIDRÁULICA" title="ADEQUAÇÃO HIDRÁULICA">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">ADEQUAÇÃO HIDRÁULICA</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de adequação Hidráulica                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->


                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/3-1506976625.jpg&amp;w=1920&amp;h=600" alt="ALVENARIAS / CONCRETAGEM" title="ALVENARIAS / CONCRETAGEM">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">ALVENARIAS / CONCRETAGEM</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                         Confira todos nossos serviços de alvenarias e concretagem                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->


                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/1-impermeabilizacao-1506976478.jpg&amp;w=1920&amp;h=600" alt="Impermeabilização" title="Impermeabilização">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">Impermeabilização</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de Impermeabilização                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->
                                                </div>                                   

                    </div><!-- /.container -->
                </div>

7
  • Não rolou... Veja na imagem link
    – Jardel
    4/10/2017 às 15:10
  • @Jardel Qual é a div que tem a sombra?
    – Sam
    4/10/2017 às 15:16
  • @Jardel Tente mudando o seletor para .wprt-image-box .item.
    – Sam
    4/10/2017 às 15:41
  • não deu certo. Você utiliza boot 4 e eu 3. <script> $(window).on("load resize", function(){ $(".wprt-image-box .item").css("height","").each(function(){ $(this).css("height",$(this).closest(".col-md-4").height()+"px"); }); }); </script> .wprt-image-box.has-shadow { margin: 0 -15px; } .wprt-image-box.has-shadow .item { padding: 0px 15px 30px; } .wprt-image-box.has-shadow .item .inner { background-color: #fff; -webkit-box-shadow: 0px 5px 300px 0px rgba(0,0,0,0.07); -moz-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.07); box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.07); }
    – Jardel
    4/10/2017 às 17:57
  • eu fiz o que o Guilherme Nascimento indicou e deu certo: .wprt-image-box.has-shadow .item .inner { min-height: 400px;} Agora descobri o seletor. Como adaptar no seu script para dar certo também, pois no seu script é automático e não preciso fixar o tamanho.
    – Jardel
    4/10/2017 às 18:13
2

Eu diria que o caminho mais simples e que para o seu caso aonde o conteúdo não é dinâmico seria fixar uma altura minima com min-height, assim:

.precos .col-md-4 {
    padding: 15px;
}
.item {
    min-height: 400px;
    border: 1px #ccc solid;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="precos row">
  <div class="col-md-4">
      <div class="item"></div>
  </div>
  <div class="col-md-4">
      <div class="item">.col-md-4</div>
  </div>
  <div class="col-md-4">
      <div class="item">.col-md-4</div>
  </div>
</div>

Usando Flex

Conforme este link você pode usar o http://getbootstrap.com.vn/examples/equal-height-columns/ que é um experimento, não foi implementado (http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css), deve ficar assim:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  justify-content: space-around;
}

.row-eq-height [class*="col-xs-"] {
    width: 100%;
}

.item {
    height: 100%; /*acompanha a altura do pai*/
    border: 1px #ccc solid;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="precos row row-eq-height">
  <div class="col-md-4">
      <div class="item">
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
      </div>
  </div>
  <div class="col-md-4">
      <div class="item">.col-md-4</div>
  </div>
  <div class="col-md-4">
      <div class="item">.col-md-4</div>
  </div>
</div>


Relacionados

Postagens relacionadas:

16
  • Isso não é uma boa. Por ser um layout responsivo, vai dar problema de exibição.
    – Sam
    3/10/2017 às 20:58
  • @Dvdsamm como não é? é claro que é, o conteudo é fixo, mesmo que o layout seja responsivo o conteudo conforme a ilustração do AP é um conteudo estático, ou seja o que muda na responsividade é somente as colunas e não o conteudo delas. De qualquer forma para casos de conteudos dinamicos existe o row-eq-height, conforme edição da resposta.
    – Syzoth
    3/10/2017 às 21:01
  • Usando min-height vc está se baseando na div que terá maior altura, ok! As outras, de menor altura, vão ficar com um espaço vazio na parte de baixo. Isso é Ok se as divs estiverem lado-a-lado como na imagem da pergunta, mas, e seu abrir num smartphone, as divs devem ficar uma embaixo da outra, e fica muito ruim uma div com um espaço em branco na parte de baixo. Não sei se deu pra entender.
    – Sam
    3/10/2017 às 21:08
  • @Dvdsamm isso não tem nada haver com responsividade, de qualquer forma mesmo que abra numa tela pequena se o AP assim desejar que as alturas "variem" novamente ele resolver com o um media-query (@media) a aplicar min-height: 1px;, mas de qualquer forma no smartphone o efeito dessas colunas irá lembrar "sections", sendo assim as sections podem sim ter algura minima. Eu usei um valor grande, mas o AP pode ajustar o min-height como quiser.
    – Syzoth
    3/10/2017 às 21:14
  • Melhor usar flex mesmo.
    – Sam
    3/10/2017 às 21:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .