6

Olá, estou tentando ajustar a altura das minhas divs conforme a div que tiver o maior texto, quando a página carrega, funciona normal, mas quando eu altero as dimensões da tela, não funciona.

HTML

<div class="info">
                    <p class="titulo"><img src="./images/geek.png"><span>O QUE É UM HACKATHON?</span></p>
                    <p class="mensagem">
                        Hackathon é uma maratona de desenvolvimento de produto inovador.
                        <br />
                        <b><i>HACK</i></b>: 
                        Tal como Hacker's, que ficam horas e horas desenvolvendo a solução para um problema. Comprometidos até o final do projeto, 
                        não importanto quantas horas fique acordado. O importante é ter café, guloseimas e muita programação.
                        <br /><br />
                        <b><i>THON</i></b>: De fato, esta forma de resolver problemas é uma verdadeira maratona,
                        para quem não está habituado com horas e horas de programação.
                        <br />
                        Mas quem aqui nunca virou uma noite desenvolvendo "aquele sisteminha"?
                        <br /><br />
                        <b><i>HACKATHON</i></b>: Uma palavra "aportuguesada" que nos fará referência à uma maratona de programação
                        para o desenvolvimento de uma solução, cuja finalidade será ajudar o próximo.
                        Sendo este sistema para uso social.
                    </p>

            </div>
            <div class="info">
                    <p class="titulo"><img src="./images/design.png"><span>O QUE VAMOS DESENVOLVER?</span></p>
                    <p class="mensagem">
                        O sistema será utilizado pora conectar entidades que desejam realizar doações de produtos com entidades que precisam receber doações.
                        <br /><br />
                        <b style="font-size:17px;">Uma visão geral</b>
                        <br />
                        Uma instituição que precisa arrecadar doações, se cadastra em nosso sistema e este por sua vez, informa quais e quantos produtos estão precisando para determinada finalidade.
                        <br /><br />
                        Do outro lado, temos instituições que desejam realizar doações de produtos e não sabem quais organizações estão precisando.
                        <br />
                        No momento em que o pedido de doação de uma instituição for processado, todos os interessados em doar, recebem um aviso sobre aquele tipo de doação.
                        <br /><br />
                        <a class="label label-primary pull-right" href="#" style="font-size: 15px;">Veja o descritivo completo do projeto</a>
                    </p>

            </div>
            <div class="info">
                    <p class="titulo"><img src="./images/code.png"><span>INFRAESTRUTURA</span></p>
                    <p class="mensagem">
                        O SENAI possui laboratórios sofisticados com computadores Desktop e internet poderosa.

                        Você pode trazer seu computador para utilizar seus programas já instalados e configurados.

                        Os softwares utilizados serão preferencialmente livres, salvo quando a licença for particular.
                        <br /><br />
                        O café e as bolachinhas serão por conta do SENAI.
                    </p>

            </div>
            <div class="info">
                    <p class="titulo"><img src="./images/code.png"><span>INFRAESTRUTURA</span></p>
                    <p class="mensagem">
                        O SENAI possui laboratórios sofisticados com computadores Desktop e internet poderosa.

                        Você pode trazer seu computador para utilizar seus programas já instalados e configurados.

                        Os softwares utilizados serão preferencialmente livres, salvo quando a licença for particular.
                        <br /><br />
                        O café e as bolachinhas serão por conta do SENAI.
                    </p>
            </div>
        </div>

jQuery

    function tInfo(){
tam = 0;
jQuery(".info").each(function(){
    if(tam < jQuery(this).height()){
        tam = jQuery(this).height();
    }
});
tam += "px";
jQuery(".info").css("height", tam);} jQuery(document).ready(function(){
tInfo();
jQuery(window).resize(function() {
    tInfo();
});});
3
  • Bom, aqui elas ficaram com o mesmo tamanho, mas não foi do maior não, foi do menor! O resize() funcionou aqui. Única coisa que estranhei foi a variável "tam" ser reconhecida sem o "var" antes dela. Commented 19/06/2016 às 9:37
  • Pelo menos foi o que um alert(jQuery(this).height()); depois do fechamento do IF indicou... Dica: não precisa colocar px na variável "tam" pra funcionar, e ao invés de sempre escrever jQuery você pode usar um $ Commented 19/06/2016 às 9:40
  • Outra coisa, o resize() não afeta em nada, já que todos DIVs tem o mesmo tamanho no onLoad Commented 19/06/2016 às 9:44

1 Resposta 1

1

Boa tarde colega! Tudo certo?

Olhando o seu código, deduzo que seja iniciante na construção de páginas web, visto usar sintaxes que caíram em desuso. Eu entendi o que quer fazer, mas recomendo a refazer todo o layout de sua página.

O problema é que você está usando as sintaxes br e p para estruturar sua página, e isso é um erro, principalmente para o quer fazer. A semântica dessas sintaxes são bem específicas, e se comportam de formas distintas em diversos navegadores. É normal no começo usá-las para organizar os elementos da sua página.

Mesmo que você encontre a solução do seu problema, notará que haverá divergências quando aplicadas em diferentes resoluções, ou seja, em dimensões de telas distintos.

O CSS faz todo essa estruturação e é muito fácil trabalhar com ele. Por exemplo: O uso das propriedades display, width e height para definir as dimensões de suas divs, trabalhando com valores em %.

Eu suponho que isto é apenas para o seu trabalho, mas fica essa recomendação, pois você verá a necessidade de estar construindo páginas mais sofisticadas

Consulte o site da W3C para se aprofundar. Bons estudos.

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 .