I have the following code
$(document).ready(main);
var contador = 1;
function main(){
$('.menu_bar').click(function(){
if (contador == 1) {
$('nav').animate({
left:'0'
});
contador=0;
}else{
contador=1;
$('nav').animate({
left:'-100%'
});
}
});
//Mostramos y ocultamos submenus
$('.submenu').click(function(){
$(this).children('.children').slideToggle();
});
}*{
padding:0;
margin:0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
footer{
width: 100%;
bottom: 0;
height: 50px;
position: fixed;
background: #fff;
box-shadow: 1px 1px 5px #000;
-webkit-box-shadow: 1px 1px 5px #000;
-moz-box-shadow: 1px 1px 5px #000;
}
#logo h1{
color: #85929E;
font:bold 25px Verdana;
}
#logo{
float: left;
margin-left: 10px;
text-align:left;
width:80px;
}
#logo1{
float: right;
margin-right: 90px;
margin-top:-75px;
text-align:center;
width:100px;
}
#logo2 p{
color: #85929E;
font:bold 20px Verdana;
text-align: center;
}
#menu{
float:center;
text-align:center;
}
.container{
text-align:center;
}
.menu_bar{
display:none;
}
header{
width: 100%;
}
header nav {
background:#023859;
z-index:1000;
max-width: 900px;
width:95%;
margin:20px auto;
margin-left:150px;
}
header nav ul{
list-style:none;
}
header nav ul li{
display:inline-block;
position: relative;
}
header nav ul li:hover{
background: #85929E;
}
header nav ul li a{
color: #fff;
display: block;
text-decoration:none;
padding: 20px;
}
header nav li a span{
margin-right:10px;
}
header nav ul li:hover .children{
display: block;
}
header nav ul li .children{
display: none;
background: #011826;
position: absolute;
width: 120%;
z-index:1000;
}
header nav ul li .children li {
display: block;
overflow: hidden;
border-bottom: 1px solid rgba(255,255,255,.5);
}
header nav ul li .caret{
position: relative;
top: 3px;
margin-left: 10px;
margin-right:10px;
}
header nav ul li .children li a{
display: block;
}
header nav ul li .children li a span{
float: right;
position: relative;
top:3px;
margin-right: 0;
margin-left:10px;
}
header nav ul li .caret{
position: relative;
top: 3px;
margin-left: 10px;
margin-right: 0px;
}
@media screen and (max-width: 800px){
body{
padding-top:80px;
}
#logo{
display:none;
}
#logo1{
display: none;
}
.menu_bar{
display:block;
width:100%;
position:fixed;
top:0;
/*background:#E6344A;*/
color: #85929E;
}
.menu_bar .bt-menu{
display:block;
padding:20px;
color: #85929E;
overflow:hidden;
font-size: 25px;
font-weight: bold;
text-decoration:none;
-webkit-box-shadow: 1px 1px 5px #000;
-moz-box-shadow: 1px 1px 5px #000;
}
.menu_bar span{
float:right;
font-size: 40px;
}
header nav {
width: 80%;
height: calc(100%-80px);
position:fixed;
right:100%;
margin:0;
overflow:scroll;
}
header nav ul li{
display: block;
border-bottom: 1px solid rgba(255,255,255,.5);
}
header nav ul li a{
display: block;
}
header nav ul li:hover .children{
display:none;
}
header nav ul li .children{
width: 100%;
position: relative;
}
header nav ul li .children li a{
margin-left:20px;
}
header nav ul li .caret{
float:right;
}
#contenedor{
width:80%;
margin:0 auto;
padding:30px;
}
#contenedor h1{
font-size:24px;
font:bold 25px Verdana;
}
form{
flex-wrap:wrap;
display: flex;
justify-content: space-between;
}
#contenedor form{
margin-top:20px;
}
#form {
margin-right:auto;
margin-left:auto;
}
input[type="text"], [type="date"]{
margin-top: 20px;
padding-left: 5px;
height:35px;
font-size: 16px;
border-radius: 3px;
}
select{
margin-top: 20px;
width:60%;
padding-left:5px;
height:35px;
font-size: 16px;
border-radius: 3px;
}
#contenedor .input-50{
width: 48%;
}
#contenedor .input-100{
width:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-menu"></span>Control PAC</a>
</div>
<div class="container">
<div id="logo">
<h1>Control<br/>PAC</h1>
</div>
<div id="menu">
<nav>
<ul>
<li class="<?php echo $pagina == 'inicio' ? 'active' : ''; ?>"><a href="?p=inicio"><span class="icon-home"></span>Inicio</a>
<li class="submenu">
<a href="#"><span class="icon-user-plus"></span>Registar<span class="caret icon-circle-down"></span></a>
<ul class="children">
<li class="<?php echo $pagina == 'reg-conductor' ? 'active' : ''; ?>"><a href="?p=reg-conductor">Conductor</a></li>
<li><a href="#">Propietario</a></li>
</ul>
</li>
<li><a href="#">Modificar</a></li>
<li><a href="#">Retirar</a></li>
</ul>
</ul>
</nav>
</div>
<div id="logo1">
<img src="imagenes/logo-ConectarTV.png">
</div>
</div>
</header>
<div id="contenedor">
<h1 id="titulo-form"> Registrar conductor</h2>
<div id="form">
<form>
<input class="input-100" type="text" id="cedula" placeholder="Ingrese la cedula del conductor">
<input class="input-50" type="text" id="nombre" placeholder="Ingrese el nombre del conductor">
<input class="input-50" type="text" id="apellido" placeholder="Ingrese el apellido del conductor">
<select class="input-50" type = "text" id="dpto" placeholder = "Escoga un departamento">
</select>
<select class="input-50" type = "text" id="cdd" placeholder = "Escoga una ciudad">
<input class="input-100" type="text" id="tel" placeholder="Ingrese el telefono del conductor" class="">
<select class="input-100" type = "text" id="lic">
<option value="0">Escoga una categoria de licencia</option>
<option value="A1">A1-Motocicletas hasta 125 c.c de cilindrada</option>
<option value="A2">A2-Motocicletas, motociclos y motiriclicos de más de 125 c.c de cilindrada</option>
<option value="B1">B1-Automoviles, camperos, camionetas y microbuses de servicio particular</option>
<option value="B2">B2-Camiones, rígidos,buesetas y buses para servicio particular</option>
<option value="B3">B3-Vehículos articulados de servicio particular</option>
<option value="C1">C1-Automoviles, camperos, camionetas y microbuses de servicio publico</option>
<option value="C2">C2-Camiones, rígidos,buesetas y buses para servicio publico</option>
<option value="C3">C3-Vehículos articulados de servicio publico</option>
</select>
<input class="input-50" type="date">
<input class="input-50" type="text" id="nrolic" placeholder="Numero de licencia del conductor" class="">
<select class="input-50" type = "text" id="tpveh">
<option value="0">Escoga un tipo de vehiculo</option>
<option value="camion">Camion</option>
<option value="camioneta">Camioneta</option>
<option value="carry">Carry</option>
<option value="moto">Moto</option>
</select>
<select class="input-50" type = "text" id="plcs">
<option value="0">Escoga una placa</option>
</select>
<input type = "button" value = " Registrar" class = "btn-enviar" id = "btn-enviar"/>
</form>
</div>
</div>
<footer>
<section id="logo2">
<p id="pie">Desarrollado por NABUX INC<br/>
<span class="icon-whatsapp"></span>3105361395</p>
</section>
</footer>
</div>
</body>
</html>If I scroll to the form, what is left under the footer will be covered and I can not scroll any more to get to the button to send the form, what I would like to see is the effect of the movement in the form and can go down to the end.