Bootstrap 3 Enjuaga el pie de página hasta el fondo. no arreglado

177

Estoy usando Bootstrap 3 para un sitio que estoy diseñando.

Quiero tener un pie de página como esta muestra. Muestra

Tenga en cuenta que no lo quiero FIJO, por lo que bootstrap navbar-fixed-bottom no resuelve mi problema. Solo quiero que esté siempre en la parte inferior del contenido y que también responda.

Cualquier guía será muy apreciada.

EDITAR:

Lo siento si no estaba claro. Lo que sucede ahora es que cuando el cuerpo del contenido no tiene suficiente contenido. Mi pie de página se mueve hacia arriba y luego deja un espacio vacío en la parte inferior.

Esto es lo que tengo ahora para mi barra de navegación

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}

html css twitter-bootstrap footer usuario3169403
fuente

¿Tiene un código de ejemplo en el que ha estado trabajando que le está dando un problema?

badAdviceGuy

Parece un pie de página normal, si no quieres Fixed, puedes actualizar el estilo. ¿Qué problema te encuentras?

Mutante el

Cuando es lo último en tu HTML, siempre estará en la parte inferior. Pregunta confusa que necesita un ejemplo de código para comprender cuál es el problema.

Joe Conlin

stackoverflow.com/questions/643879/…

davidpauljunior

@davidpauljunior: Esos son pegajosos pies de página que no es lo que busco

user3169403

124

Vea el ejemplo a continuación. Esto hará que su pie de página se mantenga en la parte inferior si la página tiene menos contenido y se comportará como un pie de página normal si la página tiene más contenido.

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

ACTUALIZACIÓN : La nueva versión de Bootstrap muestra cómo agregar un pie de página adhesivo sin agregar un contenedor. Consulte la respuesta de Jboy Flaga para obtener más detalles.

Surjith SM
fuente

Sus enlaces están rotos

Halter

2

¿Por qué hay dos definiciones de propiedades de altura en el contenedor?

Difícilmente notorio el

@HardlyNoticeable tiene un ancho mínimo para forzar el envoltorio incluso si el contenido es menor.

Surjith SM

Todavía me pregunto por qué hay dos definiciones de propiedades de altura. No respondiste @SurjithSM

Erowlin

@Erowlin Eso es un error. No necesita dos propiedades de altura. Solo la altura mínima será suficiente, editó la respuesta.

Surjith SM

316

Aquí hay una solución simplificada de bootstrap (donde no necesita crear una nueva clase): http://getbootstrap.com/examples/sticky-footer-navbar/

Cuando abra esa página, haga clic derecho en un navegador y "Ver código fuente" y abra el archivo sticky-footer-navbar.css ( http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar. css )

puedes ver que solo necesitas este CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

para este HTML

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>

Jboy Flaga
fuente

19

Esto (de los documentos / ejemplos de Bootstrap) debería ser la respuesta aceptada.

richardm

55

Para mí esto no funciona porque mi pie de página es bastante alto. Es genial si solo quieres un párrafo, pero el mío tiene varias columnas: con este método, termino con un margen debajo del pie de página cuando bajo a tamaños más pequeños

NightMICU

9

¿No es esta la solución de pie de página adhesivo Bootstraps? No creo que el OP haya querido decir esto. Para mí, con una página larga, mi pie de página apareció en la parte inferior de la pantalla pero no en la parte inferior del contenido (es decir, sobre el contenido). Tuve que cambiar Posición: absoluta; relativo (en la clase .footer) para que esto funcione.

Tino Mclaren

24

Esta sería la respuesta correcta si este tema no tuviera "no arreglado" en el título ...

Ruudy

1

esto solo funciona para pies de página con tamaño fijo, prefiero la solución de Philip Walton propuesta por @ChristopherTan, que es súper delgada e independiente de la altura del pie de página

buergi

16

use flexbox como puede usarlo a su disposición. La solución ofrecida por Bootstrap 4 aún busca contenido superpuesto en un diseño receptivo, por ejemplo: se romperá en la vista móvil, me encuentro con el truco más ordenado es usar la demostración de la solución flexbox que se muestra aquí :( https://philipwalton.github.io / resuelto por flexbox / demos / sticky-footer / ) de esta manera no tenemos que lidiar con el problema de altura fija que es una solución obsoleta por ahora ... esta solución funciona para bootstrap 3 y 4, lo que sea que esté usando.

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

Christopher Tan
fuente

1

Esta es una solución muy inteligente. Creo que CSS tiene demasiado para ofrecer que ni siquiera sabemos cómo aprovecharlo al máximo.

Gilbert

2

Amo esta solución Asombroso.

Bagus Aji Santoso

14

ACTUALIZACIÓN: Esto no responde directamente a la pregunta en su totalidad, pero otros pueden encontrar esto útil.

Este es el HTML para su pie de página receptivo

<footer class="footer navbar-fixed-bottom">
     <div class="container">
     </div>
</footer>

Para el CSS

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

NOTA: En el momento de la publicación de esta pregunta, las líneas de código anteriores no empujan el pie de página debajo del contenido de la página; pero evitará que su pie de página se arrastre a mitad de la página cuando haya poco contenido en la página. Para ver un ejemplo que empuja el pie de página debajo del contenido de la página, eche un vistazo aquí http://getbootstrap.com/examples/sticky-footer/

Rex CoolCode Charles
fuente

Esta es realmente una mala solución, ya que el pie de página cubre el contenido principal cuando se encuentran. Debe establecer el padding-bottomcontenido del contenedor de contenido principal igual a la altura del pie de página. Y debe hacerlo dinámicamente en la página loady los resizeeventos y también en el pie de página DOMSubtreeModified.

tao

9

Para las personas que todavía tienen dificultades y la solución respondida no funciona como usted desea, esta es la solución más simple que he encontrado.

Envuelva su contenido principal y asígnele una altura de vista mínima. Ajuste los 60 a cualquier valor que necesite su estilo.

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

Eso es y funciona bastante bien.

eGlu
fuente

Tuve el mismo problema que el en cuestión. Después de probar casi todas las respuestas altamente calificadas aquí, esta fue la única que funcionó para mí. Y funcionó en todos los tamaños. El único cambio que hice fue "altura mínima: 70vh". Esto dependerá de los tamaños de encabezado y pie de página de su sitio.

Arfath

Esto debería ser más alto, funciona exactamente como se solicitó.

ñame

Esto funcionó para mis necesidades. Simplemente modifique el valor de altura mínima hasta obtener el resultado deseado.

sawyerrken

¡Maravilloso, esta es la solución más simple y eficiente para el problema de colocación de pie de página!

Prahlad Yeri

5

Galen Gidman ha publicado una muy buena solución al problema de un pie de página adhesivo sensible que no tiene una altura fija. Puede encontrar su solución completa en su blog: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }

weiy
fuente

Esto parece ser compatible con bootstrap y, por lo tanto, debería ser la respuesta aceptada, en mi humilde opinión. No es perfecto, ya que parece estar apareciendo una barra de desplazamiento horizontal.

Florian Mertens

Florian: No hay barra de desplazamiento horizontal para mí.

HardlyNoticeable

4

Para una solución CSS pura, desplácese después de la 2da <hr>. La primera es la respuesta inicial (dada en 2016)

El principal defecto de las soluciones anteriores es que tienen una altura fija para el pie de página.
Y eso simplemente no es suficiente en el mundo real, donde las personas usan una infinidad de dispositivos y tienen el mal hábito de rotarlos cuando menos lo esperan y ** ¡Puf!** ¡ahí va el contenido de tu página detrás del pie de página!

En el mundo real, necesita una función que calcule la altura del pie de página y ajuste dinámicamente el contenido de la página padding-bottompara acomodar esa altura. Y debe ejecutar esta pequeña función en la página loady los resizeeventos, así como en el pie de página DOMSubtreeModified(en caso de que su pie de página se actualice dinámicamente de forma asincrónica o contenga elementos animados que cambien de tamaño cuando interactúa).

Aquí hay una prueba de concepto, usando jQuery v3.0.0y Bootstrap v4-alpha, pero no hay ninguna razón por la cual no debería funcionar en versiones inferiores de cada uno.

Mostrar fragmento de código

jQuery(document).ready(function($) {
  $.fn.accomodateFooter = function() {
    var footerHeight = $('footer').outerHeight();
    $(this).css({
      'padding-bottom': footerHeight + 'px'
    });
  }
  $('footer').on('DOMSubtreeModified', function() {
    $('body').accomodateFooter();
  })
  $(window).on('resize', function() {
    $('body').accomodateFooter();
  })
  $('body').accomodateFooter();
  window.addMoreContentToFooter = function() {
    var f = $('footer');
    f.append($('<p />', {
        text: "Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."
      }))
      .append($('<hr />'));
  }
});

body {
  min-height: 100vh;
  position: relative;
}

footer {
  background-color: rgba(0, 0, 0, .65);
  color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.5rem;
  display: block;
}

footer hr {
  border-top: 1px solid rgba(0, 0, 0, .42);
  border-bottom: 1px solid rgba(255, 255, 255, .21);
}

<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://v4-alpha.getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<div class="container">
  <div class="starter-template">
    <h1>Feed that footer - not a game (yet!)</h1>
    <p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button>
    <hr />
    <blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.0.0</code> and Bootstrap <code>v4-alpha</code> but there is no reason why it shouldn't work with lower versions of each.</blockquote>
  </div>
</div>

<footer>I am a footer with dynamic content.
  <hr />
</footer>

Expandir fragmento

Inicialmente, publiqué esta solución aquí, pero me di cuenta de que podría ayudar a más personas si se publica bajo esta pregunta.

Nota: Me han envuelto a propósito del $([selector]).accomodateFooter()como un plugin de jQuery, por lo que podría ser ejecutado en cualquier elemento DOM, como en la mayoría de los diseños que no es el $('body')'s bottom-paddingque las necesidades de ajuste, pero alguna página envoltorio elemento con position:relative(por lo general el padre inmediato del footer) .

Edición posterior (más de 3 años después de la respuesta inicial):

En este punto, ya no considero aceptable el uso de JavaScript para colocar un pie de página de contenido dinámico en la parte inferior de la página. Se puede lograr solo con CSS, usando flexbox, a la velocidad del rayo, entre navegadores.

Aquí está:

Mostrar fragmento de código

// Left this in so you could inject content into the footer and test it:
// (but it's no longer sizing the footer)

function addMoreContentToFooter() {
  var f = $('footer');
  f.append($('<p />', {
      text: "Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."
    }))
    .append($('<hr />'));
}

.wrapper {
  min-height: 100vh;
  padding-top: 54px;
  display: flex;
  flex-direction: column;
}

.wrapper>* {
  flex-grow: 0;
}

.wrapper>main {
  flex-grow: 1;
}

footer {
  background-color: rgba(0, 0, 0, .65);
  color: white;
  width: 100%;
  padding: 1.5rem;
}

footer hr {
  border-top: 1px solid rgba(0, 0, 0, .42);
  border-bottom: 1px solid rgba(255, 255, 255, .21);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="wrapper">
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
  <main>
    <div class="container">
      <div class="starter-template">
        <h1>Feed that footer - not a game (yet!)</h1>
        <p class="lead">Footer won't ever cover the body contents, as its not fixed. It's simply placed at the bottom when the page should be shorter using `min-height:100vh` on container and using flexbox to push it down.</p><button class="btn btn-warning" onclick="addMoreContentToFooter()">Feed that footer</button>
        <hr />
        <blockquote class="lead">
          <strong>Note:</strong> This example uses current latest versions of jQuery (<code>3.4.1.slim</code>) and Bootstrap (<code>4.4.1</code>) (unlike the one above).
        </blockquote>
      </div>
    </div>
  </main>
  <footer>I am a footer with dynamic content.
    <hr />
  </footer>
</div>

Expandir fragmento

tao
fuente

3

Este método utiliza un marcado mínimo. Simplemente coloque todo su contenido en un envoltorio que tenga un relleno inferior y un margen inferior negativo igual a la altura del pie de página (en mi ejemplo 100px).

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>

Vin
fuente

2

O esto

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>

AnBisw
fuente

1

Para Bootstrap:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>

shilovk
fuente

2

La pregunta establece específicamente que navbar-fixed-bottomNO es lo que resuelve el problema.

p4sh4

1

Ninguna de estas soluciones me funcionó exactamente porque utilicé la clase inversa de barra de navegación en mi pie de página. Pero obtuve una solución que funcionó y sin Javascript. Se utilizó Chrome para ayudar a formar consultas de medios. La altura del pie de página cambia a medida que la pantalla cambia de tamaño, por lo que debe prestar atención a eso y ajustar en consecuencia. El contenido del pie de página (configuré id = "pie de página" para definir mi contenido) debe usar postion = absolute y bottom = 0 para mantenerlo en la parte inferior. También ancho: 100%. Aquí está mi CSS con consultas de medios. Tendrá que ajustar el ancho mínimo y el ancho máximo y agregar o eliminar algunos elementos:

#footer {
  position: absolute;
  color:  #ffffff;
  width: 100%;
  bottom: 0; 
}
@media only screen and (min-width:1px) and (max-width: 407px)  {
    body {
        margin-bottom: 275px;
    }

    #footer {
        height: 270px; 
    }
}
@media only screen and (min-width:408px) and (max-width: 768px)  {
    body {
        margin-bottom: 245px;
    }

    #footer {
        height: 240px; 
    }
}
@media only screen and (min-width:769px)   {
    body {
        margin-bottom: 125px;
    }

    #footer {
        height: 120px; 
    }
}

Brian Edwards
fuente

0

Esto es lo que funcionó para mí usando Flexbox :

.body-class {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.body-content {
    flex: 1 0 auto;
    width: 100%;
}

.footer {
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    flex: none;
}

Fuente: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Leniel Maccaferri
fuente

Bootstrap 3 Enjuaga el pie de página hasta el fondo. no arreglado

Respuestas: