Upper DIV occupying entire screen

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

The unit of measure in percent ALWAYS respects the bounds of the parent element, ie before you set 100% height for the DIV child element within the BODY, you must also 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;
}

I believe that whatever you want to be, that the bottom div is rendered after the top 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;
}

Hello, I think this will solve your problem:

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

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) takes up the entire vertical viewport and the bottom div (in blue) comes after it can only be seen after scrolling.

I hope I have helped. Hugs

No css put so

.tudo {
   width: 100%;
}