Ir al pie de página al pie de la página, twitter bootstrap

306

Generalmente estoy familiarizado con la técnica de borrar un pie de página usando CSS.

Pero tengo algunos problemas para que este enfoque funcione para el programa de arranque de Twitter, muy probablemente debido al hecho de que el programa de arranque de Twitter es de naturaleza receptiva. Utilizando el programa de arranque de Twitter, no puedo hacer que el pie de página se vacíe hasta el final de la página utilizando el enfoque descrito en la publicación de blog anterior.

css twitter-bootstrap footer Calvin Cheng
fuente
Antes de probar todas las respuestas a continuación, tenga en cuenta que el OP quiere que funcione con twitter bootstrap. Como no es obligatorio, twitter bootstrap funciona con Jquery, lo que significa que está habilitado para Javascript. Por esa razón solo pruebe mi respuesta: stackoverflow.com / preguntas / 10099422 /…
HenryW
44
Ejemplo oficial: getbootstrap.com/examples/sticky-footer-navbar/…
usuario
1
¡El enlace está roto! ¿Alguien puede arreglar el enlace de ejemplo oficial?
PassionInfinite
1
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar puede convertirse en una versión anterior en el futuro debido a 4.0, supongo.
Ammad Khalid

Respuestas:

324

Encontramos los fragmentos aquí que funcionan muy bien para bootstrap

HTML:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}
Chuan Yeong
fuente
Esta es la mejor solución que he intentado hasta ahora. Aceptó esto como la respuesta.
Calvin Cheng el
Hola, he implementado este método, funciona muy bien, pero ahora tengo algunos problemas para mostrar la página en el iPhone (la página está ampliada). Alguna idea de cuál es el problema? Aquí hay algunos detalles: stackoverflow.com/questions/18621090/…
pupadupa
94
En caso de que haya leído esta respuesta y no se haya desplazado hacia abajo, vale la pena mirar las otras respuestas
MattyW
44
especialmente este: stackoverflow.com/questions/10099422/…
HenryW
1
Este es el mejor método que he encontrado para Bootstrap. Para la capacidad de respuesta del dispositivo, recuerde usar consultas de medios para actualizar las alturas #main y .footer para diferentes tamaños de pantalla
SyntaxGoonoo
467

Esto ahora se incluye con Bootstrap 2.2.1.

Bootstrap 3.x

Use el componente navbar y agregue .navbar-fixed-bottomclase:

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

Bootstrap 4.x

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

No olvide agregar body { padding-bottom: 70px; }o de lo contrario el contenido de la página puede estar cubierto.

Documentos: http://getbootstrap.com/components/#navbar-fixed-bottom

sanon
fuente
35
@ChuanYeong Lamentablemente no hay navbar-static-bottom.
Lawrence Woodman
25
@MikeCurry no preguntó sobre un pie de página fijo, sino uno que "llene" el espacio vacío, si su página no tiene suficiente contenido para hacer que el pie de página permanezca en la parte inferior. Si su pie de página es solo informativo, uno fijo solo ocupa un espacio valioso.
rdlu
22
Este no es un pie de página adhesivo, porque se usa posición: fijo; lo que no está bien
Furkat U.
99
Sí, esta solución solo se descarga en la parte inferior de la ventana gráfica, no en la parte inferior de la página. es decir, el pie de página siempre es visible.
rism
3
Tuve que rechazar la respuesta porque da confusión. El OP no quiere un pie de página adhesivo.
HenryW
77

Un ejemplo de trabajo para Twitter bootstrap NOT STICKY FOOTER

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

Versión que siempre se actualiza en caso de que el usuario abra devtools o cambie el tamaño de la ventana.

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

Necesita al menos un elemento con un #footer

Cuando no desee la barra de desplazamiento si el contenido se ajusta a la pantalla, simplemente cambie el valor de 10 a 0
La barra de desplazamiento se mostrará si el contenido no se ajusta a la pantalla.

HenryW
fuente
99
Sí, fui con este también. CSS puede ser tan estúpido a veces. No es que sea imposible, pero las soluciones de propósito general pueden ser difíciles de encontrar, y arreglar cosas molestas como esta en nuestros diseños no debería hacer viajes para intercambiar apilamientos, revisiones múltiples, pruebas cruzadas y rendición eventual a un simple JS truco. Sí, me siento un poco sucio, pero al menos funciona.
meecect
3
Cada solución que he visto está mal. Este es el ÚNICO que realmente hace lo que se supone que debe hacer: pegar el pie de página en la parte inferior de la página, sin ocultar ningún contenido si se cambia el tamaño del navegador.
Dave
13
no funcionó tan tranquilo como esperaba para mí, aún así, una de las mejores respuestas, arreglé mi problema reemplazándolo $('#footer').height();con$('#footer').outerHeight();
DarkMukke
3
¡Gran respuesta! Tuve un par de adaptaciones que creo mejorar aquí: stackoverflow.com/a/36385654/8207
Cory
66
La mejor respuesta que he encontrado. Si desea que funcione después de cambiar el tamaño de la ventana, simplemente coloque el código principal de la respuesta dentro $(window).resize(function() {//main code goes here});e invoque $(window).resize();para configurarlo cuando se carga la página.
Szymon Sadło
36

Aquí se explica cómo implementar esto desde la página oficial:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

¡Lo acabo de probar ahora y FUNCIONA GENIAL! :)

HTML

<body>

    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

El código CSS relevante es este:

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
Leniel Maccaferri
fuente
77
Gracias por publicar esto, definitivamente fue la mejor solución (sin mencionar la única que funcionó) para mi proyecto en particular, y por supuesto es bueno que sea directamente del proyecto en sí.
Cory
1
No sé cuál fue el trato, pero no pude hacerlo funcionar sin agregar un desplazamiento a las páginas. Terminé cambiando el CSS .wrapper para que la altura mínima fuera "calc (100% - 120px)", donde 120px es la altura de mi pie de página y eliminé el <div id = "push"> </div> del html ya que no parecía estar haciendo nada más que agregar altura a la página que no necesitaba.
jammyman34
36

Para pegajoso pie de página se utilizan dos DIV'sen el HTML básico para el pie de página pegajoso efecto. Escribe así:

HTML

<div class="container"></div>

<div class="footer"></div>

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
sandeep
fuente
77
Dijo que está usando Twitter Bootstrap. ¿Cuál sería la forma más fácil de integrar esto en Bootstrap sin reescribir completamente el HTML?
Cody Gray
1
Si OP quiere lograr el efecto Sticky Footer, entonces tiene que cambiar su MarkUp
sandeep
¡Gracias! Este ha sido el único método que realmente me ha funcionado en un sitio ASP.NET MVC5 que usa Bootstrap. +1
Yann Duran
19

Bueno, encontré una mezcla de navbar-innery navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

Me parece bien y funciona para mi

ingrese la descripción de la imagen aquí

Ver ejemplo en Fiddle

Maxim Shoustin
fuente
2
La solución más simple y elegante. Tenga cuidado con la elaboración casera de su propio código CSS, ya que no será compatible con
Bootstrap
Usé esto y tuve un problema en un viejo Android (¿froy quizás?) Con páginas que eran más cortas que la pantalla. De lo contrario, funcionó bien en FF, Chrome, IE11, iPhone, nexus 7.
bnieland
¡Perfecto y extremadamente simple!
ramires.cabral
18

En la última versión de bootstrap 4.3, esto se puede hacer usando .fixed-bottomclass. 

<div class="fixed-bottom"></div>

Así es como lo uso con el pie de página: 

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

Puede encontrar más información en la documentación del puesto aquí .

Mohamed Ali JAMAOUI
fuente
1
Esto todavía funciona con la versión oficial 4 desatada.
klewis
Tenga en cuenta que el ejemplo en getbootstrap.com/docs/4.1/examples/sticky-footer tiene un estilo line-height = 60px en el elemento de pie de página. Esto no solo es innecesario, sino que también evita que el pie de página funcione correctamente si es el padre de uno o más elementos div, que suele ser el caso.
ScottyB
13

La respuesta de HenryW es buena, aunque necesitaba algunos ajustes para que funcionara como quería. En particular, también se maneja lo siguiente:

  • Para evitar el "salto" en la carga de la página, primero marque invisible y configure visible en javascript
  • Tratar con el navegador cambia de tamaño con gracia
  • Además, configura el pie de página para hacer una copia de seguridad de la página si el navegador se hace más pequeño y el pie de página se vuelve más grande que la página
  • Ajustes de función de altura

Esto es lo que funcionó para mí con esos ajustes:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});
Cory
fuente
11

Esto funcionó para mí perfectamente.

Agregue esta clase navbar-fixed-bottom a su pie de página.

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

Lo usé así:

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

Y se establece en el fondo sobre todo el ancho.

Editar: Esto hará que el pie de página esté siempre visible, es algo que debe tener en cuenta.

sp_omer
fuente
10

Debe ajustar su .container-fluiddiv para que su pie de página adhesivo funcione, también le faltan algunas propiedades en su .wrapperclase. Prueba esto:

Elimine el padding-top:70pxde su bodyetiqueta e inclúyalo en su .container-fluidlugar, así:

.wrapper > .container-fluid {
    padding-top: 70px;
}

Tenemos que hacer esto porque presionar bodyhacia abajo para acomodar la barra de navegación termina empujando el pie de página un poco más (70 píxeles más allá) más allá de la ventana gráfica para obtener una barra de desplazamiento. Obtenemos mejores resultados presionando el .container-fluiddiv en su lugar.

Luego tenemos que eliminar la .wrapperclase fuera de tu .container-fluiddiv y envolver tu #maindiv con ella, así:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

Su pie de página, por supuesto, debe estar fuera del .wrapperdiv, así que retírelo del div .wrapper y colóquelo afuera, así:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

Una vez hecho todo esto, acerque su pie de página correctamente a su .wrapperclase utilizando un margen negativo, de esta manera:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

Y eso debería funcionar, aunque probablemente tendrá que modificar algunas otras cosas para que funcione cuando se cambia el tamaño de la pantalla, como restablecer la altura en la .wrapperclase, así:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}
Andres Ilich
fuente
9

Esta es la forma correcta de hacerlo con Twitter Bootstrap y la nueva clase navbar-fixed-bottom: (no tienes idea de cuánto tiempo pasé buscando esto)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
Régis B.
fuente
9

¡Utiliza las utilidades flexibles integradas en Bootstrap 4! Esto es lo que se me ocurrió usando principalmente las utilidades Bootstrap 4.

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>
  • .d-flex para hacer que el div principal sea un contenedor flexible
  • .flex-column en el div principal para organizar sus elementos flexibles en una columna
  • min-height: 100vh al div principal, ya sea con un atributo de estilo o en su CSS, para llenar la ventana verticalmente
  • .flex-grow-1 en el contenedor, elemento para que el contenedor de contenido principal ocupe todo el espacio que queda en la altura de la ventana gráfica.
EGhost57
fuente
En lugar de min-height: 100vhla min-vh-100clase de Bootstrap se puede usar.
ikonuk
Esta solución funcionó muy bien, incluida la sugerencia min-vh-100 de @ikonuk
TGR
4

Use el componente navbar y agregue la clase .navbar-fixed-bottom:

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

agregar cuerpo 

  { padding-bottom: 70px; }
Admin File3
fuente
3

para manejar diseños de restricción de ancho, use lo siguiente para que no obtenga esquinas redondeadas y para que su barra de navegación esté al ras de los lados de la aplicación

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

entonces puede usar css para anular las clases bootstrap para ajustar la altura, la fuente y el color

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }
1-14x0r
fuente
3

Puede usar jQuery para manejar esto:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});
DucCuong
fuente
2

¡El único que funcionó para mí !:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
Ricardo
fuente
2

La técnica más simple es probablemente usar Bootstrap navbar-static-bottomjunto con la configuración del contenedor principal div con height: 100vh(nuevo porcentaje de puerto de vista CSS3 ). Esto vaciará el pie de página hasta el fondo.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>
Pan Wangperawong
fuente
2

Probado con Bootstrap 3.6.6.

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}
Dušan Maďar
fuente
1 
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

La altura del pie de página coincide con el tamaño de la sangría inferior del elemento de ajuste.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
Sharpless512
fuente
1

Aquí hay una solución para la versión más reciente de Bootstrap (4.3 en el momento de la escritura) usando Flexbox.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

Y un ejemplo de codepen: https://codepen.io/tillytoby/pen/QPdomR

Tom T
fuente
1

Según el ejemplo de Bootstrap 4.3 , en caso de que estés perdiendo la cordura como lo hice yo, así es como funciona:

  • Todos los padres del pie de página div deben tener height: 100%( h-100clase)
  • El padre directo del pie de página debe tener display: flex( d-flexclase)
  • El pie de página debe tener margin-top: auto( mt-autoclase)

El problema es que en los marcos de front-end modernos a menudo tenemos envoltorios adicionales alrededor de estos elementos.

Por ejemplo, en mi caso, con Angular, compuse la vista desde una raíz de aplicación separada, un componente principal de la aplicación y un componente de pie de página, todos los cuales agregaron su elemento personalizado al DOM.

Entonces, para que funcione, tuve que agregar clases a estos elementos envolventes: un adicional h-100, moviendo d-flexun nivel hacia abajo y moviendo mt-autoun nivel hacia arriba desde el pie de página (así que en realidad ya no está en la clase de pie de página, sino en mi <app-footer>costumbre elemento).

MrValueType
fuente
Tuve que poner class="h-100"a la <html>etiqueta también.
Kel Solaar
1

Use este fragmento de código en bootstrap, funciona

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>
sanjay
fuente
1

Solución Bootstrap v4 +

Aquí hay una solución que no requiere repensar la estructura HTML o cualquier truco CSS adicional que implique relleno:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

Tenga en cuenta que esta solución permite pies de página con alturas flexibles, lo que es especialmente útil al diseñar páginas para múltiples tamaños de pantalla con contenido ajustado cuando se reduce.

Por que esto funciona

  • style="height:100%;"hace que la <html>etiqueta ocupe todo el espacio del documento.
  • La clase se d-flexajusta display:flexa nuestra <body>etiqueta.
  • La clase se flex-columnajusta flex-direction:columna nuestra <body>etiqueta. Sus hijos ( <header>, <main>, <footer>y cualquier otro niño directa) ahora están alineados verticalmente.
  • La clase h-100establece height:100%nuestra <body>etiqueta, lo que significa que cubrirá toda la pantalla verticalmente.
  • La clase se flex-grow-1ajusta flex-grow:1a nuestra <main>, instruyéndola efectivamente para llenar cualquier espacio vertical restante, lo que equivale a la altura vertical del 100% que establecimos antes en nuestra <body>etiqueta.

Demostración de trabajo aquí: https://codepen.io/maxencemaire/pen/VwvyRQB

Consulte https://css-tricks.com/snippets/css/a-guide-to-flexbox/ para obtener más información sobre flexbox.

Kathandrax
fuente
h-100la clase no funciona correctamente, es mejor usarla min-vh-100.
ikonuk
@ikonuk ¿Qué quieres decir exactamente con "no funciona correctamente"? Por favor elabora.
Kathandrax
Debido a que la h-100clase siempre depende de la altura de los elementos principales y puede no funcionar en algunos casos correctamente. Dado que queremos pie de página en la parte inferior de la ventana gráfica, sería una buena práctica usar la altura de la ventana gráfica.
ikonuk
Nuevamente, defina 'algunos casos'. Su argumento sobre la dependencia principal se aplica de la misma manera min-width. Es por eso que la HTMLetiqueta tiene un height100% en el código. El ejemplo funciona y no veo por qué no le daría soporte para la heightpropiedad CSS a través del navegador , que en última instancia es a lo que se traduce el fragmento Bootstrap.
Kathandrax
No dije que tu ejemplo no funciona. No todos usan el estilo en la HTMLetiqueta. En mi caso, su solución no funcionó ya que no prefiero usar el estilo en la HTMLetiqueta. Y no quiero que la bodyetiqueta dependa de otro padre sino de la ventana gráfica. No tienes que poner style="height:100%;"y h-100al mismo tiempo. Poner min-vh-100en el cuerpo simplemente hace el trabajo y menos código.
ikonuk
0

Parece que height:100%se está rompiendo la 'cadena' div#main. Intente agregarlo height:100%y eso puede acercarlo a su objetivo.

cerebros911
fuente
0

Aquí encontrará el enfoque en HAML ( http://haml.info ) con la barra de navegación en la parte superior y el pie de página en la parte inferior de la página:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER
Hannes
fuente
¿Podría explicar un poco su respuesta? Las respuestas de solo código generalmente se desaconsejan.
Qix - MONICA FUE MALTRATADA el
1
Ok, que quieres saber?
Hannes
No necesito saberlo, pero alguien que visite este sitio más tarde podría no saber exactamente por qué el código de su respuesta hace lo que hace.
Qix - MONICA FUE MAL TRATADA el
Probablemente debería eliminarlo. Escribí una nueva introducción. :)
Hannes
0

Mantenlo simple.

footer {
  bottom: 0;
  position: absolute;
}

Es posible que también deba compensar la altura del pie de página agregando un margin-bottomequivalente a la altura del pie de página body.

obfk
fuente
0

Aquí hay un ejemplo usando css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

violín

Víctor
fuente
0

otra posible solución, solo usando consultas de medios

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
GeorgeWL
fuente