Change the height of the div according to the screen size and adapt when adjust

Question

Hello, I’m trying to adjust the height of my Ivs as the div that has the most text, when the page loads, works normal, but when I change the screen dimensions, it doesn’t work.

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();
});});

Answer 1

Good afternoon buddy! All right?

Looking at your code, I deduce that you are a beginner in the construction of web pages, since you use syntaxes that have fallen into disuse. I understand what you want to do, but I recommend redoing the entire layout of your page.

The problem is that you are using the syntax br and p to structure your page, and that’s a mistake, mainly to want to do it. The semantics of these syntaxes are very specific, and they behave in different ways in several browsers. It is normal at first to use them to organize the elements of your page.

Even if you find the solution to your problem, you will notice that there will be divergences when applied in different resolutions, that is, in different screen sizes.

The CSS does all this structuring and it’s very easy to work with it. For example: The use of properties display, width and height to define the dimensions of its divs, working with values in %.

I suppose this is just for your work, but there’s that recommendation, because you’ll see the need to be building more sophisticated pages

See the website of W3C to deepen. Good studies.