1

Gostaria que a div mãe preenchesse toda área vertical, mas com o código abaixo eu não estou conseguindo. Poderiam, por favor, me ajudar?

Tenho uma div com outras três divs internas absolutas.

HTML:

<div class="boxes">
       <div class="box-01">
            <div class="box-azul-escuro">
            </div>
       </div>
       <div class="box-02">
           <div class="box-azul-claro">
           </div>
       </div>
       <div class="box-03">
          <div class="box-azul-escuro">
          </div>
       </div>
</div>

CSS:

.pagina-sobre-nos.sessao-quatro .boxes .box-azul-escuro {
    background:#1a2542;
    min-height:100px;
}

.pagina-sobre-nos.sessao-quatro .boxes .box-azul-claro {
    background:#64a7dd;
    min-height:120px;
}

.pagina-sobre-nos.sessao-quatro .boxes .box-01 {
    position:absolute;
    min-width:265px;
    height:382px;
    background:red;
    left:0;
    z-index:-1;
    -webkit-border-radius: 31px;
    -moz-border-radius: 31px;
    border-radius: 31px;
}

.pagina-sobre-nos.sessao-quatro .boxes .box-02 {
    position:absolute;
    min-width:265px;
    height:418px;
    background:green;
    left:197px;
    top:-36px;
    z-index:0;
    -webkit-border-radius: 31px;
    -moz-border-radius: 31px;
    border-radius: 31px;
}

.pagina-sobre-nos.sessao-quatro .boxes .box-03 {
    position:absolute;
    min-width:265px;
    height:382px;
    background:blue;
    left:395px;
    z-index:-1;
    -webkit-border-radius: 31px;
    -moz-border-radius: 31px;
    border-radius: 31px;
}
1
  • Não entendi o pq me deram -1. Não se pode perguntar nada aqui que já dão negativo, sem justificar. Acho isso muito errado! Ao invés de ajudar, isso só frustra.
    – Fg_
    Commented 7/06/2020 às 20:36

1 Resposta 1

2

Cara o primeiro passo é colocar o body e o html com height de 100%, depois vc pega a sua div mãe <div class="pagina-sobre-nos sessao-quatro"> e coloca nela height 100% e pronto

Olha em página toda que vai ficar melhor pra vc ver.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .pagina-sobre-nos.sessao-quatro {
    height: 100%;
    background-image: linear-gradient(to bottom, #fff 0%, #000 100%);
  }
  .pagina-sobre-nos.sessao-quatro .boxes .box-azul-escuro {
    background: #1a2542;
    min-height: 100px;
  }

  .pagina-sobre-nos.sessao-quatro .boxes .box-azul-claro {
    background: #64a7dd;
    min-height: 120px;
  }

  .pagina-sobre-nos.sessao-quatro .boxes .box-01 {
    position: absolute;
    min-width: 265px;
    height: 382px;
    background: red;
    left: 0;
    z-index: 1;
    -webkit-border-radius: 31px;
    -moz-border-radius: 31px;
    border-radius: 31px;
  }

  .pagina-sobre-nos.sessao-quatro .boxes .box-02 {
    position: absolute;
    min-width: 265px;
    height: 418px;
    background: green;
    left: 197px;
    top: -36px;
    z-index: 2;
    -webkit-border-radius: 31px;
    -moz-border-radius: 31px;
    border-radius: 31px;
  }

  .pagina-sobre-nos.sessao-quatro .boxes .box-03 {
    position: absolute;
    min-width: 265px;
    height: 382px;
    background: blue;
    left: 395px;
    z-index: 1;
    -webkit-border-radius: 31px;
    -moz-border-radius: 31px;
    border-radius: 31px;
  }
</style>
</head>

<body>

  <div class="pagina-sobre-nos sessao-quatro">
    <div class="boxes">
      <div class="box-01">
        <div class="box-azul-escuro">
        </div>
      </div>
      <div class="box-02">
        <div class="box-azul-claro">
        </div>
      </div>
      <div class="box-03">
        <div class="box-azul-escuro">
        </div>
      </div>
    </div>
  </div>


  <script>

  </script>

</body>

</html>

2
  • 1
    Vc, hugo, sempre ajudando por aqui. :) Poxa, era tão fácil neh e eu comi bola. Obrigado!!!
    – Fg_
    Commented 9/06/2020 às 1:20
  • @Fg_ fico feliz em saber que ajudei, sucesso ai no projeto :)
    – hugocsl
    Commented 9/06/2020 às 10:50

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 .