How do I pass the time from one div to another?

Asked

Viewed 1,706 times

1

I have this problem: the text is responsive, but how do I make the red divide the same size as the gray div next to it, as I decrease and enlarge the screen? There is a solution with CSS or with JS? And if there is, as I do?

divs coloridas

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            padding: 0px;margin: 0px;
        }
        section{
            width: 100%;
            background-color: pink;
            display: table;
        }
        #red, #gray{
            width: 45%;
            float: left;
            padding-right: 2.5%;
            padding-left: 2.5%;
            padding-top: 50px;
            padding-bottom: 50px;
        }
        #red{
            background-color: red;
            height: 100%;
        }
        #gray{
            background-color: gray;
            box-sizing: content-box;
        }
        #green{
            width: 100%;
            height: 200px;
            clear: both;
            background-color: green;
        }

    </style>
</head>
<body>
    <section>
        <div id="red">
        É um fato há muito estabelecido que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração eletrônica e editores de páginas.
        </div>
        <div id="gray">
            É um fato há muito estabelecido que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração eletrônica e editores de páginas da Web agora usam o Lorem Ipsum como seu texto de modelo padrão, e uma pesquisa por "lorem ipsum" descobrirá muitos sites da Web ainda em sua infância. Várias versões evoluíram ao longo dos anos, às vezes por acidente, às vezes de propósito (humor injetado e coisas do gênero).
        </div>
    </section>
    <div id="green">
    </div>
</body>
</html>
javascript css div responsive-layout

3 answers

5


You can change the display:table for display:flex in the Parent element. And then just remove the heigth:100% of the children elements, for now they will be children of a flex father.

inserir a descrição da imagem aqui

See the code as it looks

*{
    padding: 0px;margin: 0px;
}
section{
    width: 100%;
    background-color: pink;
    display: flex;
}
#red, #gray{
    width: 45%;
    float: left;
    padding-right: 2.5%;
    padding-left: 2.5%;
    padding-top: 50px;
    padding-bottom: 50px;
}
#red{
    background-color: red;
    /* height: 100%; */
}
#gray{
    background-color: gray;
    box-sizing: content-box;
}
#green{
    width: 100%;
    height: 200px;
    clear: both;
    background-color: green;
}
<section>
    <div id="red">
    É um fato há muito estabelecido que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração eletrônica e editores de páginas.
    </div>
    <div id="gray">
        É um fato há muito estabelecido que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração eletrônica e editores de páginas da Web agora usam o Lorem Ipsum como seu texto de modelo padrão, e uma pesquisa por "lorem ipsum" descobrirá muitos sites da Web ainda em sua infância. Várias versões evoluíram ao longo dos anos, às vezes por acidente, às vezes de propósito (humor injetado e coisas do gênero).
    </div>
</section>
<div id="green">
</div>

  • Wow! What an answer! You saved my day, thank you, and I hope this answer will help everyone with the same doubt! <3 <3

  • How do I do if I need more div inside those Ivs, and I don’t want them all to be flex? For what I saw if I put div inside of div a visual error

  • @Miriam ai vai depende do layout que vc pretende montar. Procure no Google por Guia flexbox ou tutorial flexbox que vc vai achar muito material. To get an idea of the layout grid of Bootstrap itself is made with Flex, because Flex is very responsive and has several alignment classes , but you will need an hour to study it to understand

1

Just put display: table-cell; on the Divs red and gray, since Section is with display: table. This will cause the Divs (and Section) to behave as if they were a table. Now, you need to remove the float: left otherwise it will not work (note that I have commented on some unnecessary properties):

*{
   padding: 0px;margin: 0px;
}
section{
   width: 100%;
   background-color: pink;
   display: table;
}
#red, #gray{
   width: 45%;
   /* float: left; */
   padding-right: 2.5%;
   padding-left: 2.5%;
   padding-top: 50px;
   padding-bottom: 50px;
   display: table-cell;
}
#red{
   background-color: red;
   /* height: 100%; */
}
#gray{
   background-color: gray;
}
#green{
   width: 100%;
   height: 200px;
   clear: both;
   background-color: green;
}
<section>
   <div id="red">
      É um fato há muito estabelecido que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração eletrônica e editores de páginas.
   </div>
   <div id="gray">
      É um fato há muito estabelecido que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração eletrônica e editores de páginas da Web agora usam o Lorem Ipsum como seu texto de modelo padrão, e uma pesquisa por "lorem ipsum" descobrirá muitos sites da Web ainda em sua infância. Várias versões evoluíram ao longo dos anos, às vezes por acidente, às vezes de propósito (humor injetado e coisas do gênero).
   </div>
</section>
<div id="green">
</div>

Using Javascript

What you can do is put height: 100% on both Ivs, however, for this height to work, Section must have a height set in pixels (px), otherwise the height is without reference. However, you cannot set a fixed Section height in the CSS because the Divs height may vary in responsiveness.

With Javascript you can dynamically adjust the height of the Section in two events, when loading the page and when resizing the screen. But for that you need to fix a few things in your CSS.

First remove the display: table and the box-sizing: content-box; is redundant because the value content-box is already the default value of the property box-sizing. So you can take it out too.

Add the height: 100% on both Divs, #red and #gray. Another thing is to put the texts within paragraphs <p></p>, being like this:

<section>
   <div id="red">
      <p>É um fato há muito estabelecido que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração eletrônica e editores de páginas.</p>
   </div>
   <div id="gray">
      <p>É um fato há muito estabelecido que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração eletrônica e editores de páginas da Web agora usam o Lorem Ipsum como seu texto de modelo padrão, e uma pesquisa por "lorem ipsum" descobrirá muitos sites da Web ainda em sua infância. Várias versões evoluíram ao longo dos anos, às vezes por acidente, às vezes de propósito (humor injetado e coisas do gênero).</p>
   </div>
</section>
<div id="green">
</div>

Are these <p> which will serve as a reference to adjust the height of the Section, as they will vary in height as the screen is resized. There, by the JS, just adjust the height of the service by the <p> greater:

document.addEventListener("DOMContentLoaded", function(){
   
   var red = document.getElementById("red");
   var gray = document.getElementById("gray");
   var section = document.querySelector("section");
   
   function ajusta(){
      var p_red = red.querySelector("p").clientHeight;
      var p_gray = gray.querySelector("p").clientHeight;
      
      section.style.height = (p_red < p_gray ? p_gray : p_red) +"px";
         
   }

   window.onresize = ajusta;
   ajusta();
   
});
*{
   padding: 0px;margin: 0px;
}
section{
   width: 100%;
   background-color: pink;
   /* display: table; */
}
#red, #gray{
   width: 45%;
   float: left;
   padding-right: 2.5%;
   padding-left: 2.5%;
   padding-top: 50px;
   padding-bottom: 50px;
   height: 100%;
}
#red{
   background-color: red;
}
#gray{
   background-color: gray;
   /* box-sizing: content-box; */
}
#green{
   width: 100%;
   height: 200px;
   clear: both;
   background-color: green;
}
<section>
   <div id="red">
      <p>É um fato há muito estabelecido que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração eletrônica e editores de páginas.</p>
   </div>
   <div id="gray">
      <p>É um fato há muito estabelecido que um leitor se distrairá com o conteúdo legível de uma página ao analisar seu layout. O ponto de usar o Lorem Ipsum é que ele tem uma distribuição de letras mais ou menos normal, em vez de usar 'Conteúdo aqui, conteúdo aqui', fazendo com que pareça legível em inglês. Muitos editores de editoração eletrônica e editores de páginas da Web agora usam o Lorem Ipsum como seu texto de modelo padrão, e uma pesquisa por "lorem ipsum" descobrirá muitos sites da Web ainda em sua infância. Várias versões evoluíram ao longo dos anos, às vezes por acidente, às vezes de propósito (humor injetado e coisas do gênero).</p>
   </div>
</section>
<div id="green">
</div>

  • WOW! It worked too! Thank you very much!!!!

  • You’re welcome! The bad thing about flex is that it doesn’t work in some browsers.

0

Just put the height on both: 

#red, #gray{
    height: ..;
}

Browser other questions tagged javascript css div responsive-layout

You are not signed in. Login or sign up in order to post.