2

buen dia, quiero saber como poner el footer hasta abajo del main, es decir que cuando la pagina es muy grande que el footer no aparesca hasta que se recorra con la barra, ya lo intente con todo lo que he buscado pero nada, este es el css que le puse:

css:

.footer{
    background-image: url("../img/swirlStripes.jpg");
    color: white;
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
}

html:

<?php $refa = base_url('assets'); ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="<?= $refa ?>/css/header.css" type="text/css">
</head>

<body>
    <div class="header">
        <div class="logo">
            <img src="<?= $refa ?>/img/HeaderV3_T1_Carta.png">
        </div>
    </div>
    <hr class="hr">
    <div class="main">
        <div>
            <div class="footer">
                <h5>Página creada por Macx®. Todos los derechos reservados.</h5>
            </div>
</body>

</html>

y me aparece asi: solo puse la parte de abajo de la pagina donde tengo el error

como se puede ver el footer me lo muestra por encima del continido que pongo.

6
  • 1
    Puedes mostrar tu estructura html ? el 10 jul. 2018 a las 14:14
  • ya esta listo...
    – Macx
    el 10 jul. 2018 a las 14:27
  • 1
    <div class="main"><div> No estás cerrando el div main, y estás abriendo otro, entonces el Div del footer sigue dentro de main. Intenta cerrando el div de main. No estoy seguro pero dependiendo del navegador puede que se interprete de una u otra manera
    – Killbunny
    el 10 jul. 2018 a las 14:39
  • pues no funciono, ya habia checado ese error y lo corregi pero nada, no funciona
    – Macx
    el 10 jul. 2018 a las 14:44
  • 1
    No tienes otros estilos interfiriendo? Cuando corro el snippet en jsfiddle funciona jsfiddle.net/tqux0yk6/3
    – Killbunny
    el 10 jul. 2018 a las 15:02

2 respuestas 2

0

You are missing position: absolute; in any case here is a footer example:

<footer class="text-center text-white">
    <p class="my-1">
      <h5>Página creada por Macx®. Todos los derechos reservados.</h5>
    </p>
</footer>

CSS:

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

There you have your footer bottom fixed.

Hope it helps.

5
  • I had already made that option, but it did not work either, if the option of position was set to absolute, the footer remained fixed, but at the time of lowering the bar the footer moved with the bar, that is, moved towards above
    – Macx
    el 10 jul. 2018 a las 16:17
  • Mira este link, funciona perfectamente jsfiddle.net/tqux0yk6/13 utilizalo como ejemplo, que funciona y corrige tus errores en el código.
    – UHDante
    el 10 jul. 2018 a las 16:43
  • why are you speaking in english? estamos en el sitio en español el 10 jul. 2018 a las 19:02
  • Lo sé jaja, se me ha ido la cabeza totalmente :). Con los dos sitios de StackOverflow me he liado por completo.
    – UHDante
    el 10 jul. 2018 a las 21:32
  • 1
    ¿y por qué no la has traducido?
    – user7176
    el 8 may. 2019 a las 9:46
0

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 72px; /* IMPORTANTE: El margen 72px tiene que ser igual a la propiedad height que tiene el .footer */
}
.text-center{
     text-align: center;
}
.footer {
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 72px; /* Establezca la altura fija del pie de página aquí */
      line-height: 60px; /* Centra verticalmente el texto */
      background-color: rgb(151, 151, 151);
}
<!doctype html>
<html lang="es">
  <head>
    <!-- La etiqueta "meta charset=utf8"  sirve para especificar el formato de las palabras -->
    <meta charset="utf-8">
    <!-- La etiqueta "meta name=viewport con su content" sirve para hacer responsiva la página -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">  
  </head>

<body>     
        <h4> Contenido </h4> 
    
 
 <footer class="footer">
         <div class="text-center">
              <h5> MI FOOTER </h5>
         </div>
 </footer> 
 </body>
</html>

1
  • gracias, pero ya lo habia resuelto, le tuve que poner: bottom: -300px; para que se quedara abajo
    – Macx
    el 13 jul. 2018 a las 17:26

Tu Respuesta

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

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