Change div height according to screen size and adapt when adjusting

Question

Change div height according to screen size and adapt when adjusting

Navigation

#1 by (1 votes)
#2 by (1 votes)

6

Hello, I'm trying to adjust the height of my divs as the div that has the largest text, when the page loads, works normal, but when I change the screen dimensions, it does not 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();
});});

html jquery css height resize

asked by anonymous 19.06.2016 / 02:49

2 answers

How to protect my JSON application? How to pass variables between PHP pages via JavaScript?

score 1 · Answer 1

Good afternoon colleague! All right?

Looking at your code, I assume you are a beginner in building web pages, using syntaxes that have fallen into disuse. I understand what you want to do, but I recommend you redo the entire layout of your page.

The problem is that you are using the br and p syntax to structure your page, and this is a mistake, especially for what you want to do. The semantics of these syntaxes are very specific, and behave differently in different browsers. It's 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 differences when applied in different resolutions, that is, in different screen sizes.

CSS does all this structuring and is very easy to work with. For example: Using the display , width , and height properties to set the dimensions of your divs , working with values in % .

I suppose this is just for your work, but you get this recommendation because you will see the need to be building more sophisticated pages

See the W3C site for further study. Good studies.

score 1 · Answer 2

#container{
  display:flex;
  margin:0 auto;
  width: 960px;
}

.box{
  width:33%;
  padding:15px;
  margin: 5px;
  border: 1px solid red; 
}

<div id="container">
  
  
  <div class="box">
    <h1>Titulo 1</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem, sed         excepturi soluta accusantium eaque distinctio rem voluptatum, molestiae laborum               reprehenderit doloribus fuga placeat? Voluptates omnis ipsam nulla beatae nihil?
    </p>
  </div>
  
    <div class="box">
    <h1>Titulo 1</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem, sed         excepturi soluta accusantium eaque distinctio rem voluptatum, molestiae laborum               reprehenderit doloribus fuga placeat? Voluptates omnis ipsam nulla beatae nihil?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem.
    </p>
  </div>
  
    <div class="box">
    <h1>Titulo 1</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem, sed
    </p>
  </div>
  
</div>

Hello, using flex will save you a lot of code and you will not need javascript for this. it's very simple.

See the example at link