0

Tengo un problema con los pies de página en Bootstrap. El problema es que consigo que se sitúe en la parte de abajo de la página, pero cuando le digo que tenga un margin top con respecto al elemento anterior, lo ignora y el último contenido queda tapado con el pie de página.

Aquí pongo una simulación de lo que me sucede. ¿Cómo se podría solucionar? Gracias

<!doctype html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Pruebas</title>
  </head>
  <body>
    <h1>Reproduccion del error</h1>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>
    
    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>
    
    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>
    
    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>
    
    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>PEasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>PAdasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>PUdasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <footer class="footer bg-primary fixed-bottom mt-5 py-3">
        <div class="container" align="center">
          <span>Pie de pagina</span>
        </div>
    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

1 respuesta 1

0

El tener el <footer> con position: fixed provoca que el elemento salga del flujo normal que tiene dentro del DOM (similar a cuando posicionas a un elemento con position: absolute). El resto de elementos no van a contemplar el espacio que ocupa, por lo que por mucho margen superior que le des jamás vas a conseguir empujar al resto del contenido.

Una solución podría ser darle padding suficiente a la parte inferior del <body> como para que contemple el tamaño que ocupa el pie de página.

body {
  padding-bottom: 50px;
}
<!doctype html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Pruebas</title>
  </head>
  <body>
    <h1>Reproduccion del error</h1>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>
    
    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>
    
    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>
    
    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>
    
    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>dadasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>PEasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>PAdasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <p>PUdasdsasafsafsffsfsfsfsfsfsfsggdsgggdgsdgsdgsgsgdsgdsdgdssssssssssssssssssssssssssssssssssssssssssssssssfgsddsdddddddddddddddddd</p>

    <footer class="footer bg-primary fixed-bottom mt-5 py-3">
        <div class="container" align="center">
          <span>Pie de pagina</span>
        </div>
    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

1
  • Perfecto! Con esa respuesta me ha quedado todo claro. Mil gracias.
    – Antonio U.
    Commented el 26 jul. 2020 a las 18:16

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.