Upper DIV occupying entire screen

Question

Guys, I got this:

<div class="tudo">
   <div class="superior"></div>
   <div class="inferior"></div>
</div>

I want the top div to occupy the entire screen independent of resolution and the contents of the bottom div are below it. How do I?

Answer 1

Remember that HTML and BODY elements are also content type (as well as DIV), which have the 100% width property by default, but height is set to "on demand".

The unit of measure in percentage ALWAYS respects the parent element boundaries, that is, before you set 100% height for the DIV child element within BODY, you also need to expand the height of the BODY and HTML elements.

html, body, .tudo, .superior {
    height: 100%;
    margin: 0;    //trate esta propriedade somente nos elementos-filhos;
    padding: 0;   //trate esta propriedade somente nos elementos-filhos;
}

Answer 2

Would this be the case?

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.tudo {
  width: 100%;
  height: 100%;
}

.superior {
  width: 100%;
  height: 100vh;
  background: red;
}

.inferior {
  width: 100%;
  height: 200px;
  background: blue;
}

<div class="tudo">
   <div class="superior"></div>
   <div class="inferior"></div>
</div>

The top div (in red) occupies the entire vertical viewport and the bottom div (in blue) after it can only be seen after scrolling the scroll bar.

I hope I helped. Hugs

Answer 3

I believe what you want is for the lower div to be rendered after the upper div, right? In this case it could be done as follows.

.superior{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: green;
}
.inferior {
         background-color: #ccc;
         height: 200px;
         width: 100%;
         position: absolute;
         top: 100%;
         left: 0;
}

Answer 4

Hello, I believe that solves your problem:

.tudo {
  width: 100%;
  height: 100%;
}
.superior{
  background-color: blue;
  width: 100%;
  height: 80%;
}
.inferior{ 
  background-color: red;
  width: 100%;
  height: 20%;
}

Answer 5

In the css put it like this

.tudo {
   width: 100%;
}