I’m new in programing and i need help with this code! I’ve being trying to fix without succes after the footer. I need to do it with simple html or css code (no media query.

/*------estilo para selector UNIVERSAL 

*{

}

---------------------------------------*/


/*---------------------------------------HEADER---------------------------------------*/


/*--Navegador--*/

.wrapp {
  margin: 0;
}

#contenedor {
  position: relative;
  background: linear-gradient(to left, royalblue, white);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0;
  align-items: center;
  flex-wrap: nowrap;
}

.imagen-logo {
  height: fit-content;
  width: 100px;
  border-radius: 50%;
  margin-left: 0.5%;
  animation-delay: 1.5s;
}

.animate__animated.animate__shakeX {
  --animate-duration: 2s;
}

ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding-left: 0;
  flex-wrap: wrap;
}

li {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: white;
  padding: 1em;
  font-size: large;
}

a {
  text-decoration: none;
  color: white
}


/*--Fin Navegador--*/


/*----------------------------------------BODY----------------------------------------*/

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
}


/*-------------HOME----------*/

.wrapp-products {
  flex: 1;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-areas: 'header header header' 'menu main aside' 'footer footer footer';
}

.caja1 {
  grid-area: header;
}

.caja2 {
  grid-area: menu;
}

.caja3 {
  grid-area: main;
}

.caja4 {
  grid-area: aside;
  height: 20git rem;
}

.caja5 {
  grid-area: footer;
}

.wrapp-products>div {
  background-color: slateblue;
  color: white;
  text-align: center;
  border: 1px solid black;
}


/*----------- FIN HOME--------*/


/*---------SUCURSALES---------*/

.sucursales {
  text-align: center;
  color: black;
}


/*--Tabla--*/

.tabla-wrapp {
  overflow-x: auto;
  margin: auto;
  padding-bottom: 10%;
}

.tabla-sucursales,
td {
  margin-top: 5em;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
}

th {
  background-color: royalblue;
  color: white;
}

.first-row {
  text-align: center;
  font-weight: bold;
}

.second-row {
  text-align: center;
}

.thirth-row iframe {
  height: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.tabla-sucursales a {
  color: blue;
  margin-left: 10px;
  margin-right: 10px;
}


/*--Fin Tabla--*/


/*------------- FIN SUCURSALES--------*/


/*------------------REGISTRO----------*/

.registro {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: sans-serif;
}

.registro-wrapper {
  max-width: 100%;
  width: 80%;
  margin: 1% auto 0;
}

.registro-wrapper .form_container {
  background: #fff;
  padding: 30px;
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.heading {
  background: linear-gradient(to left, royalblue, white);
  margin: -30px;
  text-align: center;
  color: white;
  font-size: 19px;
  margin-bottom: 35px;
  padding: 10px;
}

.registro-wrapper .form_container .form_item {
  margin-bottom: 25px;
}

.form_wrap.fullname,
.form_wrap.select_box {
  display: flex;
}

.form_wrap.fullname .form_item,
.form_wrap.select_box .form_item {
  width: 50%;
}

.form_wrap.fullname .form_item:first-child,
.form_wrap.select_box .form_item:first-child {
  margin-right: 4%;
}

.registro-wrapper .form_container .form_item label {
  display: block;
  margin-bottom: 5px;
}

.form_item input[type="text"],
.form_item select {
  width: 100%;
  font-size: 16px;
  border: 1px solid #dadce0;
  border-radius: 3px;
}

.form_item input[type="text"]:focus {
  border-color: #6271f0;
}

.btn input[type="submit"] {
  background: #1598d4;
  border: 1px solid #1598d4;
  padding: 10px;
  width: 100%;
  font-size: 16px;
  letter-spacing: 1px;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
}


/*----------------END-REGISTRO-------------*/

.end-registro-gracias {
  font-weight: bold;
  font-size: larger;
  font-family: Arial, Helvetica, sans-serif;
}

.end-registro-revisa {
  font-size: larger;
  font-family: Arial, Helvetica, sans-serif;
}


/*---------FIN REGISTROS----------*/


/*-------------------------------------FOOTER-----------------------------------------------------*/

.pie {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: royalblue;
  text-align: center;
  color: white;
}


/*--Redes Sociales--*/

i {
  margin-top: 10px;
  color: white;
}


/*--Fin Redes Sociales--*/
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/5dd0236cb0.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/estilos.css">
  <link rel="icon" href="img/AY BEBIDAS.png">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <title>AY-Bedidas</title>
</head>

<body>
  <header>
    <div class="wrapp">
      <div id="contenedor">
        <a href="http://stackoverflow.com/index.html"><img src="img/AY BEBIDAS.png" class="imagen-logo animate__animated animate__shakeX"></a>
        <ul>
          <li><a href="http://stackoverflow.com/index.html"><i class="fa-solid fa-house" style="padding-right: 10px;"></i>Home</a></li>
          <li><a href="#"><i class="fa-solid fa-beer-mug-empty" style="padding-right: 10px;"></i>Produtos</a></li>
          <li><a href="http://stackoverflow.com/Registro.html"><i class="fa-solid fa-address-card" style="padding-right: 10px;"></i>Registro</a></li>
          <li><a href="http://stackoverflow.com/Contacto.html"><i class="fa-solid fa-headset" style="padding-right: 10px;"></i></i>Contacto</a></li>
        </ul>
      </div>
    </div>
  </header>



  <div class="registro">
    <div class="registro-wrapper">
      <div class="form_container">
        <form name="form">
          <div class="heading">
            <h2>Registrate</h2>
          </div>

          <div class="form_wrap fullname">
            <div class="form_item">
              <label>Nombre</label>
              <input type="text">
            </div>

            <div class="form_item">
              <label>Apellido</label>
              <input type="text">
            </div>

          </div>

          <div class="form_wrap">
            <div class="form_item">
              <label>Email</label>
              <input type="text">
            </div>
          </div>

          <div class="form_wrap">
            <div class="form_item">
              <label>Teléfono</label>
              <input type="text">
            </div>
          </div>

          <div class="form_wrap select_box">

            <div class="form_item">
              <label>País</label>
              <select name="paises">
                <option>London</option>
                <option>Paris</option>
                <option>Moscow</option>
                <option>Tokyo</option>
              </select>
            </div>


            <div class="form_item">
              <label>Provincias</label>
              <select name="Provincias">
                <option>India</option>
                <option>Canada</option>
                <option>Germany</option>
                <option>Australia</option>
              </select>
            </div>

          </div>

          <div class="btn">
            <input type="submit" value="Registrarse">
          </div>

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






  <footer class="pie">
    <div class="redes-pie">
      <a href="https://twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a>
      <a href="https://facebook.com" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
      <a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
      <a href="https://www.linkedin.com/" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
    </div>
    <div>
      Derechos reservados @Yoly
    </div>
  </footer>
</body>

</html>

yolyc2 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

1

Hi you can prevent the footer from obscuring part of the form (this is how I perceive your question) by changing the margin-bottom of the body. I set it to 70px (you can set it to any value greater than the height of the footer). Hope this helps you!

/*------estilo para selector UNIVERSAL 

*{

}

---------------------------------------*/


/*---------------------------------------HEADER---------------------------------------*/


/*--Navegador--*/

.wrapp {
  margin: 0;
}

#contenedor {
  position: relative;
  background: linear-gradient(to left, royalblue, white);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0;
  align-items: center;
  flex-wrap: nowrap;
}

.imagen-logo {
  height: fit-content;
  width: 100px;
  border-radius: 50%;
  margin-left: 0.5%;
  animation-delay: 1.5s;
}

.animate__animated.animate__shakeX {
  --animate-duration: 2s;
}

ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding-left: 0;
  flex-wrap: wrap;
}

li {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: white;
  padding: 1em;
  font-size: large;
}

a {
  text-decoration: none;
  color: white
}


/*--Fin Navegador--*/


/*----------------------------------------BODY----------------------------------------*/

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  margin-bottom: 70px; 
}


/*-------------HOME----------*/

.wrapp-products {
  flex: 1;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-areas: 'header header header' 'menu main aside' 'footer footer footer';
}

.caja1 {
  grid-area: header;
}

.caja2 {
  grid-area: menu;
}

.caja3 {
  grid-area: main;
}

.caja4 {
  grid-area: aside;
  height: 20git rem;
}

.caja5 {
  grid-area: footer;
}

.wrapp-products>div {
  background-color: slateblue;
  color: white;
  text-align: center;
  border: 1px solid black;
}


/*----------- FIN HOME--------*/


/*---------SUCURSALES---------*/

.sucursales {
  text-align: center;
  color: black;
}


/*--Tabla--*/

.tabla-wrapp {
  overflow-x: auto;
  margin: auto;
  padding-bottom: 10%;
}

.tabla-sucursales,
td {
  margin-top: 5em;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
}

th {
  background-color: royalblue;
  color: white;
}

.first-row {
  text-align: center;
  font-weight: bold;
}

.second-row {
  text-align: center;
}

.thirth-row iframe {
  height: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.tabla-sucursales a {
  color: blue;
  margin-left: 10px;
  margin-right: 10px;
}


/*--Fin Tabla--*/


/*------------- FIN SUCURSALES--------*/


/*------------------REGISTRO----------*/

.registro {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: sans-serif;
}

.registro-wrapper {
  max-width: 100%;
  width: 80%;
  margin: 1% auto 0;
}

.registro-wrapper .form_container {
  background: #fff;
  padding: 30px;
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.heading {
  background: linear-gradient(to left, royalblue, white);
  margin: -30px;
  text-align: center;
  color: white;
  font-size: 19px;
  margin-bottom: 35px;
  padding: 10px;
}

.registro-wrapper .form_container .form_item {
  margin-bottom: 25px;
}

.form_wrap.fullname,
.form_wrap.select_box {
  display: flex;
}

.form_wrap.fullname .form_item,
.form_wrap.select_box .form_item {
  width: 50%;
}

.form_wrap.fullname .form_item:first-child,
.form_wrap.select_box .form_item:first-child {
  margin-right: 4%;
}

.registro-wrapper .form_container .form_item label {
  display: block;
  margin-bottom: 5px;
}

.form_item input[type="text"],
.form_item select {
  width: 100%;
  font-size: 16px;
  border: 1px solid #dadce0;
  border-radius: 3px;
}

.form_item input[type="text"]:focus {
  border-color: #6271f0;
}

.btn input[type="submit"] {
  background: #1598d4;
  border: 1px solid #1598d4;
  padding: 10px;
  width: 100%;
  font-size: 16px;
  letter-spacing: 1px;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
}


/*----------------END-REGISTRO-------------*/

.end-registro-gracias {
  font-weight: bold;
  font-size: larger;
  font-family: Arial, Helvetica, sans-serif;
}

.end-registro-revisa {
  font-size: larger;
  font-family: Arial, Helvetica, sans-serif;
}


/*---------FIN REGISTROS----------*/


/*-------------------------------------FOOTER-----------------------------------------------------*/

.pie {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: royalblue;
  text-align: center;
  color: white;
}


/*--Redes Sociales--*/

i {
  margin-top: 10px;
  color: white;
}


/*--Fin Redes Sociales--*/
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/5dd0236cb0.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/estilos.css">
  <link rel="icon" href="img/AY BEBIDAS.png">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <title>AY-Bedidas</title>
</head>

<body>
  <header>
    <div class="wrapp">
      <div id="contenedor">
        <a href="http://stackoverflow.com/index.html"><img src="img/AY BEBIDAS.png" class="imagen-logo animate__animated animate__shakeX"></a>
        <ul>
          <li><a href="http://stackoverflow.com/index.html"><i class="fa-solid fa-house" style="padding-right: 10px;"></i>Home</a></li>
          <li><a href="#"><i class="fa-solid fa-beer-mug-empty" style="padding-right: 10px;"></i>Produtos</a></li>
          <li><a href="http://stackoverflow.com/Registro.html"><i class="fa-solid fa-address-card" style="padding-right: 10px;"></i>Registro</a></li>
          <li><a href="http://stackoverflow.com/Contacto.html"><i class="fa-solid fa-headset" style="padding-right: 10px;"></i></i>Contacto</a></li>
        </ul>
      </div>
    </div>
  </header>



  <div class="registro">
    <div class="registro-wrapper">
      <div class="form_container">
        <form name="form">
          <div class="heading">
            <h2>Registrate</h2>
          </div>

          <div class="form_wrap fullname">
            <div class="form_item">
              <label>Nombre</label>
              <input type="text">
            </div>

            <div class="form_item">
              <label>Apellido</label>
              <input type="text">
            </div>

          </div>

          <div class="form_wrap">
            <div class="form_item">
              <label>Email</label>
              <input type="text">
            </div>
          </div>

          <div class="form_wrap">
            <div class="form_item">
              <label>Teléfono</label>
              <input type="text">
            </div>
          </div>

          <div class="form_wrap select_box">

            <div class="form_item">
              <label>País</label>
              <select name="paises">
                <option>London</option>
                <option>Paris</option>
                <option>Moscow</option>
                <option>Tokyo</option>
              </select>
            </div>


            <div class="form_item">
              <label>Provincias</label>
              <select name="Provincias">
                <option>India</option>
                <option>Canada</option>
                <option>Germany</option>
                <option>Australia</option>
              </select>
            </div>

          </div>

          <div class="btn">
            <input type="submit" value="Registrarse">
          </div>

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






  <footer class="pie">
    <div class="redes-pie">
      <a href="https://twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a>
      <a href="https://facebook.com" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
      <a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
      <a href="https://www.linkedin.com/" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
    </div>
    <div>
      Derechos reservados @Yoly
    </div>
  </footer>
</body>

</html>

Not the answer you’re looking for? Browse other questions tagged