6

Estoy intentando hace horas que el footer me quede fijo abajo sin importar el tamaño de la pantalla. En tamaño de pantalla normal(pc) me aparece perfectamente abajo pero cuando lo achico a tamaño celular se va hacia el medio de la pantalla. Ya probé con position y con otras soluciones que busqué pero no logro solucionarlo. No entiendo que estoy haciendo mal, me ayudaría mucho que alguien me marque el error. ¡Desde ya muchas gracias!

Este es mi código

.headercont {
    width: 100%;
    background-color:rgb(198, 224, 183) ;
    height: 220px; 
    position: relative;
}
header {
    width: 100%;
    background-color:rgb(198, 224, 183) ;
    position: fixed;
    z-index: 100;
}

header ul {
   margin-top: 10px;
}
header img {
    height: 120px;
    width: 120px;
    border-radius: 30px;

}
  .buscador {
    border: grey;
    border-radius: 40px;
    background-color: ivory;
    float: right;
    padding: 0px 60px;
    margin: 50px 50px 0px 0px;
}
.menu-principal {
    text-align:center;
    padding-top: 20px;
    margin: auto;
}
body {
    margin: 0px 0px;
}

.contenedor-logo {
    text-align:center;
    padding-top: 20px;
    margin-left: 120px;
}
.menu-principal ul li {
    padding: 6px 100px 6px 100px ;
    margin: 6px;
    display: inline;
    justify-content: center;
    align-items: center;
    border: 2px solid cadetblue;
}



.menu-principal ul li:hover {
    background-color: rgb(84, 117, 119);

}
.menu-principal ul li:hover a {
    color: white;
    text-shadow: 3px 3 px 4px black;
}

ul li a {
    text-decoration:none;
    text-align: center;
    color: rgb(49, 49, 49);
}



#lightSlider li img {
width: 100%;
margin-top: 10px;
 }

.contenido  {
     display: flex; /*contenedor flex*/
     flex-direction:row ;
     align-items: center ;
     flex-wrap: wrap;
     height: 400px;
 }



.contenido div /*item flex*/
 {
   width: 33%;
   }

.contenido img /*item flex*/ {
     height: 400px;
     margin: 10px 10px;
     border-radius: 30px;
     overflow: hidden;
     opacity: 80%;
 }

 .peques img {
     height: 300px;
    margin-bottom: 60px;     
 }


 footer {
   display: flex;
   flex-direction: row;
    justify-content: center;
    align-items: center;

     height: 90px; 
     width: 100%;
     background-color:rgb(198, 224, 183) ;

}
footer img {
    height: 30px;
    width: 30px;
    padding: 10px;

}


div button {
margin: 20px;
background-color: rgb(158, 197, 155);
padding:10px 60px ;
border: none;
position: relative;
left: 50%;
color: white;
font-size: 17px;
font-weight: bolder;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s linear;
}
div button:hover {
    color: grey;
    background-color: white;
    box-shadow: 3px 3px 4px black;
    text-shadow: 3px 3 px 4px black;}

    @media (max-width: 1350px){

        .menu-principal ul li {
            display:flex;
           flex-direction: column;
            }

        }
        @media (max-width: 1350px) {
            .contenido div {
                display: flex;
                flex-direction: column;
                width: 100%;
                padding: 30px;
                margin: 0px 20px;
            }
        }
<!DOCTYPE html>
<html>
   <head>

    <title>
        Mates personalizados
    </title>

     <link rel="stylesheet" href="CSS/style.css">
     <link type="text/css" rel="stylesheet" href="css/lightslider.css" />  

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>                       
     <script src="js/lightslider.js"></script>
     <script type="text/javascript">
      $(document).ready(function() {
    $('#lightSlider').lightSlider({
        adaptiveHeight:true,
        item:1,
        slideMargin:0,
        loop:true
    });
});
      </script>

   </head>
   <body>
   <div class="headercont">
    <header>
        <div class="buscador">
            <p>buscar</p>
        </div>
        <div class="contenedor-logo">
      <img src="images/logomate.jpg" alt="logo mate">
    </div>

      <div class="menu-principal"> 
          <ul>
              <li>
              <a href="index.html">INICIO</a>
              </li>
              <li>
                  <a href="productos.html">PRODUCTOS</a>
              </li>
              <li>
                  <a href="nosotros.html">NOSOTROS</a>
              </li>
              <li>
                  <a href="personaliza.html">PERSONALIZÁ TU MATE</a>
              </li>
          </ul>
      </div>
    </header>
  </div>

    <div class="poster">
      <ul id="lightSlider">
        <li>
      <img src="images/backk cop.jpg" alt="mates 1"></li>
      <li>
        <img src="images/slider 1.jpg" alt="mates 2"></li>
        <li>
          <img src="images/slider 2.jpg" alt="mates 3"></li>
          <li>
            <img src="images/slider 3.jpg" alt="mates 4"></li>
            <li>
              <img src="images/slider 4.jpg" alt="mates 5"></li>
    </ul>
    </div>
    <div class="contenido">

      <div>
       <img src="images/conjunto.jpg" alt="conjunto">
      </div>
      <div class="peques">
       <img src="images/MATE 3.jpg" alt="mate">
      </div>
      <div class="peques">
         <img src="images/TERMO Y MATE.jpg" alt="TERMO">
      </div>
    </div>

     <div>
       <button>
        <p>Personalizá tu mate!</p>
       </button>
     </div>

    <footer>
       <img src="images/ig.png" alt="instagram">
       <img src="images/face.png" alt="facebook">
    </footer>
    </body>
</html>

5 respuestas 5

1

No estás haciendo nada mal, lo que pasa es que el body si no tiene contenido, o el contenido es muy pequeño se ve mal, lo que puedes hacer es dalre un min-height al contenido ejemplo:

.content {
  min-height: calc(100vh - 50px);
  padding: 40px 40px 0 40px;
}
.footer {
  height: 50px;
}
1
  • 1
    el footer sí tiene contenido, dos imágenes. Commented el 8 jun. 2020 a las 15:25
1

Una manera simple de lograrlo con flexbox es:

  • Tener todos los elementos que deseas maquetar dentro de una etiqueta padre o contenedor
  • Darle un display con un valor de flex a dicha etiqueta padre
  • Como originalmente todo se distribuye horizontalmente, entonces modificamos la orientación pasándolo a columna
  • Tus etiquetas que estén encima del footer tendrán el alto que su contenido les dé
  • Tu footer quedará como elemento final

Código:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Código</title>
      <style>
        * {
          margin: 0;
        }
        .container {
          display: flex;
          flex-direction: column;
        }
        .container-descripcion {
          border: 1px solid;
        }
        .container-final__pagina {
          border: 1px solid crimson;
        }
      </style>
    </head>
    <body>
    <main class="container">
      <section class="container-descripcion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quas fuga, ratione rem ducimus fugit repellendus numquam dignissimos at dolorum. Asperiores itaque dolorem amet praesentium quam recusandae cum! Veritatis, enim.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quas fuga, ratione rem ducimus fugit repellendus numquam dignissimos at dolorum. Asperiores itaque dolorem amet praesentium quam recusandae cum! Veritatis, enim.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quas fuga, ratione rem ducimus fugit repellendus numquam dignissimos at dolorum. Asperiores itaque dolorem amet praesentium quam recusandae cum! Veritatis, enim.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quas fuga, ratione rem ducimus fugit repellendus numquam dignissimos at dolorum. Asperiores itaque dolorem amet praesentium quam recusandae cum! Veritatis, enim.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quas fuga, ratione rem ducimus fugit repellendus numquam dignissimos at dolorum. Asperiores itaque dolorem amet praesentium quam recusandae cum! Veritatis, enim.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quas fuga, ratione rem ducimus fugit repellendus numquam dignissimos at dolorum. Asperiores itaque dolorem amet praesentium quam recusandae cum! Veritatis, enim.
      </section>
      <footer class="container-final__pagina">
        aquí los datos del footer
      </footer>
    </main>
    </body>
    </html>

Ahora:

  • Con el código actual el pie de página se verá hasta el final de la misma si el contenido es lo suficiente como para empujarlo al fondo
  • Sin embargo si por alguna razón el cuerpo de tu página no contiene suficiente texto el pie de página quedaría un poco arriba, lo que podemos hacer es que a la etiqueta padre o contenedora le demos un height de 100vh
1
  • A esta solución añádele .container { justify-content: space-between;} y ya no dependes del tamaño del contenido si además obligas al contenedor a una altura mínima de 100vh (la altura del viewport min-height: 100vh;), pero permites que se adapte a tamaños mayores si hay más contenido (height: 100%;)
    – Sokkian
    Commented el 2 abr. 2021 a las 16:48
1

Una solución podría ser usando css grid, asignándole 1fr a tu contenido y auto a tu header y footer. Para posteriormente no recalcular el height de tu contenido como se ve en el siguiente ejemplo:

:root {
  --background: #f8f8f8;
  --header-bg: #ff6e00;
  --footer-bg: #425066;
  --text-color: #ffffff;
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}

.main-content {
  background-color: var(--background);
}

.app-header {
  background-color: var(--header-bg);
  height: 30px;
  color: var(--text-color);
}

.app-footer {
  height: 30px;
  background-color: var(--footer-bg);
  color: var(--text-color);
}
<header class="app-header">header</header>
<main class="main-content">main</main>
<footer class="app-footer">footer</footer>

0

Proba añadiendo al body la propiedad

body{
 position: absolute;
}

y en el footer

footer{
  bottom: 0;
  position: absolute;
  width: 100%;
}
0

Otra forma sencilla es con con min-height: x vh Le asignas un valor minimo a: header, main y footer de forma tal que la suma sea 100vh y ocupe toda la pantalla, si hay mas contenido crecerán las cajas.

header {
    border:solid 1px black;
    min-height: 10vh;
}

main {
    border: solid 1px green;
    min-height: 80vh;
}

footer {
    border: solid 1px red;
    min-height: 10vh;

}
/* 
.content{
    height: 200em;
    background-color: black;
} */
  <body>
    <header>
      <h1>header</h1>
    </header>
    <main>
      <h2>Main</h2>
      <div class="content">

      </div>
    </main>
    <footer>
      <h3>footer</h3>
    </footer>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.