I created a navbar with a form on the side but when I add several inputs in the form the page loses the background

Question

form view:

    <div class ="registerUser">
        <h1 class="w3-xxlarge ">Cadastro de clientes</h1>
        <hr style="width: 80%">
             <form method="POST" action="">
                <h3 class="w3-xlarge leftTitle escuro">Dados do cliente:</h3><br><br>    
                    <div class ="form-group esquerda" >
                        <label>Nome:</label>
                        <input class="form-control " type="text" placeholder="Insira o nome" required>
                        <br>
                        <label>Data de Vencimento:</label>
                        <input class="form-control" id="date" type="date">
                    </div>
                        <br><br> 
                <h3 class="w3-xlarge leftTitle escuro">Dados do carro:</h3><br><br> 
                    <div class ="form-group esquerda">
                        <label>Placa</label>
                        <input class="form-control" type="text" placeholder= "Informe a placa do veiculo"  >
                        <br>
                        <label>Cor</label>
                        <input class="form-control" type="text" placeholder="Informe a cor do veiculo" >
                        <br>
                        <label>Marca</label>
                        <input class="form-control" type="text" placeholder="Informe a Marca do veiculo"  >
                        <br>
                        <label>Modelo</label>
                        <input class="form-control" type="text" placeholder="Informe o Modelo do veiculo"  >
                                                   

                    </div>
                    <br>
                <br><br><br>
            </form>   
    </div>
</div>

Nav view:

`

<img src="../imgs/imgPark2.png" style="width:100%; height:12vh;">
<ul id="nav">
    <li><a  href="{{route ('ShowCar')}}" ><i class="fa fa-home w3-xxlarge"></i><br>Inicio</a></li>
    <li><a  ><i class="fa fa-user w3-xxlarge"></i><br>Clientes</a>
        <ul>
        <li><a href="{{route('registerUser')}}">Cadastrar cliente</a></li>
            <li><a href="#">Ver clientes</a></li>
            <li><a href="#">Data de pagamento</a></li>
            <li><a href="#">Remover Cliente</a></li>
          </ul>
        </li>
        <li><a id ="closeButton "href="{{route('Home')}}" ><i  class ="fa fa-close   w3-xxlarge"></i><br>Sair</a></li>

</ul>
</nav>`

CSS

body {
    width: 100%;
    height: 100% ;
    background-color: lightgray;
    color:lightgray; 
  }

.spot{
    background-color: black;
    height: 100%;
    display: block;
    width: 12vw;
    position: fixed!important;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    text-align: center;
    }
        ul li {
        position: relative;
        }

        li ul {
            position: absolute;
            left: 12vw;
            top: 0;
            display: none;
            
            }
            ul li a {
                display: block;
                text-decoration: none;
                color: white;
                
                font-family: 'Lucida Console', Monospace;
                
                background:black;
                font-size: x-large;
                padding: 12px;
                border: 0.5px solid rgb(0, 0, 0);
             }
             li:hover ul { display: block; }


             ul li a:hover{
                text-decoration:none;
                color: black;
                background: white;
             }
.registerUser{
    text-align:center;  
    position: absolute;
    top: 15vh;
    left: 30vw;
    background-color: white;
    padding: 25px 15vw 0 00px;
    border: 3px outset #fff;
    border-radius: 0.3rem;
div.esquerda{
margin-left: 5vw;
    display: inline-block;
  width: 320px;
  text-align: left  
}

.leftTitle{
    
   display: inline-block;
   width: 320px;
   text-align: left  
}

.escuro{
font-weight: 600;
}

Answer 1

I believe that if you try to use the property min-height instead of 'height' no body can solve, as it will adapt to its maximum content if it exceeds the minimum.

Comparison between the two(px will be used in the example but the operation is the same)

#box{
  height: 100px;
  background-color: #bbb;
}

<div id="box">
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
</div>

Now with min-height:

#box{
  min-height: 100px;
  background-color: #bbb;
}

<div id="box">
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
</div>

Depending on how is your menu, when the body grows, it will stay at the top, an interesting solution is also to use overflow-y

#box{
  height: 100px;
  background-color: #bbb;
  overflow-y: scroll
}

<div id="box">
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
  <p>Um paragrafo</p>
</div>

I also noticed an error in your code:

.registerUser{
text-align:center;  
position: absolute;
top: 15vh;
left: 30vw;
background-color: white;
padding: 25px 15vw 0 00px;
border: 3px outset #fff;
border-radius: 0.3rem;
div.esquerda{
margin-left: 
blabla...

One class is inside the other, no class closure . registerUser

I hope I’ve helped!!

Answer 2

I believe this may be happening due to:

.registerUser { 
  position: absolute
}

This way, this element will have a higher priority over the other elements (will be out of the normal flow of the document), besides its dimensions being defined by the internal content, which in its case exceeds the dimensions of the body, because they are defined as 100%:

body {
  width: 100%;
  height: 100%;  
}

Therefore, I believe that one possible solution would be to remove this dimensioning of body and leave their class .register thus:

.registerUser { 
  position: relative
}

I’m learning, but I hope I’ve helped.

Follows the documentation: position - CSS | MDN