Div mother occupy all height of absolute content

Question

Div mother occupy all height of absolute content

Asked 4 years, 3 months ago

Viewed 33 times

1

I would like the mother div to fill in all vertical area, but with the code below I’m not getting it. Could you please help me?

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

I don’t understand why they gave me -1. You can’t ask anything here that is already negative, without justifying it. I think this is very wrong! Instead of helping, it just frustrates.

– Fg_

2020/06/07 at 20:36

1 answer

Browser other questions tagged html css div

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

by hugocsl • **65,517** points · Answer 1 · 2020-06-07T22:36:52+00:00

Guy the first step is to put the body and the html with height 100%, then you take your mother div <div class="pagina-sobre-nos sessao-quatro"> and put in it height 100% and ready

Look at the whole page that will be better for you to see.

<!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>