379

Tenía la siguiente página (deadlink:) http://www.workingstorage.com/Sample.htmque tiene un pie de página que no puedo dejar en la parte inferior de la página.

Quiero el pie de página para

pegarse a la parte inferior de la ventana cuando la página es corta y la pantalla no está llena, y
manténgase al final del documento y baje normalmente cuando hay más de una pantalla llena de contenido (en lugar de superponer el contenido).

El CSS se hereda y me confunde; Parece que no puedo cambiarlo correctamente para poner una altura mínima en el contenido o hacer que el pie de página vaya al final.

css footer Caveatrob
fuente

16

Es sorprendente que este sea un problema tan común. Tal vez en CSS4 veremos implementaciones de "hacer una barra de navegación" y "hacer un pie de página" ya que se intentan con tanta frecuencia.

isomorphismes

1

Nunca habrá CSS4 (CSS3 solo crecerá). Estoy pensando que esto se solucionará con la implementación de flexbox.

Marijke Luttekes

1

Excelente artículo sobre esto: css-tricks.com/couple-takes-sticky-footer

Phil

expertuggestion.com/css-snippets/8

Lalit Baghel

345

Un método simple es hacer el cuerpo 100%de su página, con un min-heightde 100%también. Esto funciona bien si la altura de su pie de página no cambia.

Dale al pie de página un margen superior negativo:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

Jon Winstanley
fuente

27

Esto solo funciona si conoce la altura de su pie de página con anticipación. A veces los pies de página tienen contenido dinámico, o su construcción de un marco. ¿Alguna idea para pies de página de altura variable?

Costa

@Costa revise mi respuesta aquí , para una solución que funciona con pies de página de altura variable.

Jose Rui Santos

para contenido dinámico simplemente omita la "altura" y el pie de página se adaptará al contenido. No probado en todos los navegadores

m47730

Esto puede requerir box-sizing: border-box;al cuerpo [y al #container].

konsolebox

Esto parece un montón de trucos extraños, a continuación hay respuestas que son simples y no utilizan trucos.

Andrew Koster

166

He desarrollado un método bastante fácil para pegar el pie de página en la parte inferior, pero como los métodos más comunes, deberá ajustarlo para que se ajuste a la altura de su pie de página.

VER DEMO

Método de Flexbox:

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Expandir fragmento

Este método a continuación utiliza un "truco" al colocar un ::afterpseudo-elemento en el body, y configurarlo para que tenga la altura exacta del pie de página, por lo que ocupará exactamente el mismo espacio que el pie de página, por lo que cuando el pie de página se absolutecoloca sobre él, parecería que el pie de página realmente está ocupando espacio y elimina los efectos negativos de su posición absoluta (por ejemplo, revisar el contenido del cuerpo)

`position:absolute` Método: (no permite la altura dinámica del pie de página)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

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

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Expandir fragmento

Método de diseño de tabla:

html,body { height: 100%;  margin: 0; }

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Expandir fragmento

vsync
fuente

Simple y elegante y lo más importante, funciona. Otras soluciones fallan cuando comienza a agregar divs con display: table display: table-row display:table-cell. Sin embargo, descubrí que necesitaba agregar body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}para evitar una barra de desplazamiento. Puede atender esto ajustando el, body:after heightpero estoy especificando el mío en rem no px, por lo que se vuelve problemático.

Steve Waring

3

@ SteveWaring - Gracias. Se actualizó esta respuesta ya que era bastante antigua. Ahora estoy a favor de usarflexbox

vsync

1

El CSS bajo "marcado común básico" tenía un pequeño error que hizo que no funcionara (el error no estaba presente en el "DEMO" vinculado, lo cual está bien). Me tomé la libertad de arreglarlo.

sleske

3

¡GRACIAS! La solución flexbox es realmente simple y no utiliza hacks ni tamaños fijos extraños ni posiciones fijas.

Andrew Koster

1

¡Esta demostración es la única que funciona! ¡Fantástico, gracias!

Drakinite

51

Un enfoque muy simple que funciona muy bien en varios navegadores es este:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

Expandir fragmento

Tamás Pap
fuente

34

He usado esto para pegar mi pie de página en la parte inferior y funcionó para mí:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

Esa es la única modificación que tiene que hacer en el HTML, agregue eso divcon la "allButFooter"clase. Lo hice con todas las páginas, las que eran tan cortas, sabía que el pie de página no se pegaría al final, y también páginas lo suficientemente largas que ya sabía que tenía que desplazarme. Hice esto, por lo que pude ver que funciona bien en el caso de que el contenido de una página sea dinámico.

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

La "allButFooter"clase tiene un min-heightvalor que depende de la altura de la ventana gráfica ( 100vhsignifica el 100% de la altura de la ventana gráfica) y la altura del pie de página, que ya sabía que era 40px.

Eso fue todo lo que hice y funcionó perfectamente para mí. No lo he probado en todos los navegadores, solo en Firefox, Chrome y Edge, y los resultados fueron los que quería. El pie de página se pega al final y no tiene que meterse con el índice z, la posición ni ninguna otra propiedad. La posición de cada elemento en mi documento era la posición predeterminada, no la cambié a absoluta o fija ni nada.

Trabajando con diseño receptivo

Aquí hay algo que me gustaría aclarar. Esta solución, con el mismo pie de página que tenía 40px de altura, no funcionó como esperaba cuando estaba trabajando en un diseño receptivo usando Twitter-Bootstrap. Tuve que modificar el valor que estaba restando en la función:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

Esto probablemente se deba a que Twitter-Bootstrapviene con sus propios márgenes y rellenos, por eso tuve que ajustar ese valor.

¡Espero que esto sea de alguna utilidad para ustedes! Al menos, es una solución simple para probar, y no implica hacer grandes cambios en todo el documento.

N. Larrieux
fuente

He tenido problemas con todo tipo de soluciones a este problema. Esta solución funciona con mi página que varía lo que se muestra en el cuerpo usando display: noneGracias. Es agradable y simple también.

Steve Waring

Después de muchas horas de probar soluciones, solo dos trabajaron nl. position: fixed; bottom: 0y éste. Esta solución es la mejor porque el pie de página no se pega al final, sino que se queda al final de la página desplazable.

Hmerman6006

para aprovechar su respuesta, puede verla de otra manera configurando el .footer {max-height: calc(100vh+40px); position: absolute}. Como también funciona, solo debes saber el tamaño de tu cuerpo.

Hmerman6006

29

Desde IE7 en adelante, simplemente puede usar

#footer {
    position:fixed;
    bottom:0;
}

Ver caniuse para soporte.

Liam
fuente

77

No quiero el pie de página en la parte inferior cuando hay contenido más allá del pie de página. Quiero que el pie de página se pegue al final cuando no hay suficiente, y luego se expanda hacia abajo como de costumbre cuando hay más de una pantalla. El pie de página adhesivo resolvió esto.

Caveatrob

@Caveatrob: Me tomé la libertad de editar esta información importante en su pregunta, solo para evitar malentendidos (para futuros lectores, supuestamente lo resolvió mientras tanto :-)).

sleske

¡Esta solución es la única que imprime el pie de página en cada página y es muy simple! Pero no puedo hacer que funcione que el contenido no se superpone con el contenido principal. ¿Alguien tiene una solución para esto?

Hatzen hace

15

Una solución simple que uso, funciona desde IE8 +

Proporcione la altura mínima: 100% en html, de modo que si el contenido es menor, la página aún ocupa la altura completa del puerto de visualización y los pies de página en la parte inferior de la página. Cuando el contenido aumenta, el pie de página se desplaza hacia abajo con contenido y se mantiene pegado al fondo.

Demostración de trabajo de violín JS: http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

HTML

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

Sanjeev
fuente

es bueno ... pero solo actualiza .pageContentWrapper {padding-bottom: 100px; / * Altura del pie de página * /}

Subodh Sharma

Muchas gracias. trabajando en Angular 7

Carlos Torres

No quiero hacer una barra de desplazamiento innecesaria cuando sea posible.

Константин Ван

14

Sin embargo, otra solución realmente simple es esta:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

El truco es usar un display:tablepara todo el documento y display:table-rowconheight:0 para el pie de página.

Dado que el pie de página es el único elemento secundario del cuerpo que tiene una pantalla como table-row, se representa en la parte inferior de la página.

Jose Rui Santos
fuente

Me encantan las tablas css, pero crean problemas en el futuro que son bastante extraños: stackoverflow.com/questions/24898115/…

Costa

1

Esta solución no parece funcionar por completo: Firefox ignora la altura 0 del pie de página. En su lugar, utilicé altura 1px o incluso 1%. Edge, IE11, Chrome y safari móvil están contentos con 0.

Kitet

Realmente amo esta solución. Pero cuando construyo mi diseño de esta manera, el cálculo del navegador de elementos secundarios se elimina. Digamos que queremos tener un contenedor en la parte superior de la página y tiene que ser en height: 100%realidad su 100% cuando la relación de la ventana gráfica es 1/1 (cuadrado). Cuando la ventana gráfica se ensancha (horizontal), la altura será superior al 100% y, si es más estrecha (vertical), inferior al 100%. Entonces la altura es proporcional al ancho de la ventana. Intenté resolverlo con otro contenedor, pero esto no funcionó. Alguien tiene una solución o al menos una pista?

Axel

@Axel En esta versión , he agregado un div azul en la parte superior con una altura del 100% que ocupa toda la altura (menos la altura del pie de página), independientemente del ancho de la ventana gráfica. Creo que podría tener otras cosas que estropean CSS. Intenta crear una versión minimizada de tu problema basada en mi jsFiddle original

Jose Rui Santos

@JoseRuiSantos Muchas gracias por su respuesta. Parece ser un error de Firefox. Ver captura de pantalla

Axel

8

Una solución flexible muy simple que no asume alturas fijas ni cambia la posición de los elementos.

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

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

main {
  flex: 1;
}

Soporte de navegador

Todos los principales navegadores, excepto IE11 y versiones inferiores.

Asegúrese de usar Autoprefixer para los prefijos apropiados.

Mostrar fragmento de código

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/////////////////////////////////////////////

body,
html {
    margin: 0;
    padding: 0;
}

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

Expandir fragmento

m.spyratos
fuente

¡trabajado como un encanto! incluso para res más de 4k pie de página se pega en la parte inferior

Arpan Banerjee

7

Una cosa a tener en cuenta son los dispositivos móviles, ya que implementan la idea de la ventana gráfica de una manera 'inusual':

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

Como tal, usar position: fixed;(como he visto recomendado en otros lugares) generalmente no es el camino a seguir. Por supuesto, depende del comportamiento exacto que buscas.

Lo que he usado, y ha funcionado bien en computadoras de escritorio y dispositivos móviles, es:

<body>
    <div id="footer"></div>
</body>

con

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}

Ben Jackson
fuente

6

Hacer esto

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

También puede leer sobre flex, es compatible con todos los navegadores modernos

Actualización : leí sobre flex y lo probé. Funcionó para mi. Espero que haga lo mismo por ti. Así es como lo implementé. Aquí principal no es la ID, es el div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

Aquí puede leer más sobre flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Tenga en cuenta que no es compatible con versiones anteriores de IE.

Aarth Tandel
fuente

1

Esta es la mejor respuesta en la práctica. El uso flex-grow: 1de algo por encima del pie de página mantendrá el pie de página en la parte inferior correctamente.

iBug

5

Acabo de responder una pregunta similar aquí:

Coloque el pie de página en la parte inferior de la página con un encabezado fijo

Soy bastante nuevo en desarrollo web, y sé que esto ya ha sido respondido, pero esta es la forma más fácil que encontré para resolverlo y creo que de alguna manera es diferente. Quería algo flexible porque el pie de página de mi aplicación web tiene una altura dinámica, terminé usando FlexBox y un espaciador.

Comience estableciendo la altura para su html y cuerpo

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

Estoy asumiendo un column comportamiento para nuestra aplicación, en el caso de que necesite agregar un encabezado, héroe o cualquier contenido alineado verticalmente.

Crea la clase espaciadora

.spacer {
    flex: 1; 
}

Más adelante, su HTML podría ser algo así como

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Puedes jugar con él aquí https://codepen.io/anon/pen/xmGZQL

Camuflaje
fuente

5

Esto se conoce como pie de página adhesivo. Una búsqueda en Google tiene muchos resultados. Un pie de página adhesivo CSS es el que he usado con éxito. Pero hay más.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Expandir fragmento

Fuente de este código

Paolo Bergantino
fuente

3

Mi método jquery, este coloca el pie de página en la parte inferior de la página si el contenido de la página es menor que la altura de la ventana, o simplemente coloca el pie de página después del contenido de lo contrario:

Además, mantener el código en su propio gabinete antes de otro código reducirá el tiempo que lleva reposicionar el pie de página.

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

Sam Jones
fuente

3

Yo mismo he estado investigando este problema. He visto bastantes soluciones y cada una de ellas tenía problemas, que a menudo involucraban algunos números mágicos.

Entonces, utilizando las mejores prácticas de varias fuentes, se me ocurrió esta solución:

http://jsfiddle.net/vfSM3/248/

Lo que quería lograr específicamente aquí era obtener el contenido principal para desplazarse entre el pie de página y el encabezado dentro del área verde.

Aquí hay un simple CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}

husayt
fuente

3

Odio los sitios diseñados así. ¿Por qué quieres restringir la cantidad de texto que puedo leer al mismo tiempo? No necesito ver el encabezado y el pie de página todo el tiempo, sé dónde encontrarlos cuando los quiero.

Tarmil

1

@Tarmil echa un vistazo a numerics.info . ¿Ves ahora cuando esto podría ser útil?

Husayt

3

Así es como resolví el mismo problema

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

Expandir fragmento

Nemus
fuente

3

footer {
  margin-top:calc(5% + 60px);
}

Esto funciona bien

Karthikaeyan
fuente

2

Solo personaliza la sección de pie de página

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}

 <div class="footer">
   Footer is always bootom
 </div>

rashedcs
fuente

No funciona. Siempre se queda en la parte inferior, incluso si tenemos una página muy grande. No se puede desplazar con todas las páginas, sino simplemente pegarse al final.

fWd82

No funciona El pie de página aparece sobre el contenido.

Desarrollador indolente

1

Aquí están mis dos centavos. En comparación con otras soluciones, no es necesario agregar contenedores adicionales. Por lo tanto, esta solución es un poco más elegante. Debajo del ejemplo de código, explicaré por qué esto funciona.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

Entonces, lo primero que hacemos es hacer que el contenedor más grande (html) sea 100%. La página html es tan grande como la página misma. Luego establecemos la altura del cuerpo, puede ser más grande que el 100% de la etiqueta html, pero al menos debería ser tan grande, por lo tanto, utilizamos una altura mínima del 100%.

También hacemos que el cuerpo sea relativo. Relativo significa que puede mover el elemento de bloque alrededor relativo desde su posición original. Sin embargo, no usamos eso aquí. Porque el pariente tiene un segundo uso. Cualquier elemento absoluto es absoluto para la raíz (html) o para el primer padre / abuelo relativo. Eso es lo que queremos, queremos que el pie de página sea absoluto, en relación con el cuerpo, es decir, la parte inferior.

El último paso es establecer el pie de página en absoluto y bottom: 0, que lo mueve al final del primer padre / abuelo que es relativo (cuerpo del curso).

Ahora todavía tenemos un problema que solucionar, cuando llenamos la página completa, el contenido pasa por debajo del pie de página. ¿Por qué? bueno, porque el pie de página ya no está dentro del "flujo html", porque es absoluto. Entonces, ¿cómo arreglamos esto? Agregaremos relleno de fondo al cuerpo. Esto asegura que el cuerpo sea más grande que su contenido.

Espero haberlo dejado muy claro.

David
fuente

1

Dynamic one liner usando jQuery

Todos los métodos CSS que he encontrado son demasiado rígidos. Además, establecer el pie de página en fixedno es una opción si eso no es parte del diseño.

Probado en:

Cromo: 60
FF: 54
IE: 11

Asumiendo este diseño:

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

Use la siguiente función jQuery:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

Lo que hace es establecer el min-heightpara #contentla altura de la ventana - la altura del pie de página lo que sea que sea en ese momento.

Como utilizamos min-height, si la #contentaltura excede la altura de la ventana , la función se degrada con gracia y no tiene ningún efecto, ya que no es necesaria.

Véalo en acción:

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

Expandir fragmento

Mismo fragmento en JsFiddle

Prima:

Podemos llevar esto más allá y hacer que esta función se adapte al cambio de tamaño de la altura del visor dinámico de esta manera:

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

Expandir fragmento

I haz kode
fuente

1

Puedes hacerlo

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

Abdallah Abdillah
fuente

0

Simplemente configure el html, el cuerpo y las otras filas excepto el pie de página al 100%. p.ej

<body>
<header></header>
<content></content>
<footer></footer>

el CSS se convierte

html, body, header, content{
height:100%;
}

Olatunde G.
fuente

0

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

San jaisy
fuente

0

¿Qué hay de eso?

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>

novecentonove
fuente

Si bien este código puede responder la pregunta, proporcionar un contexto adicional con respecto a por qué y / o cómo responde la pregunta mejora su valor a largo plazo.

β.εηοιτ.βε

-1

Lo he usado en muchos proyectos y nunca tuve ningún problema :)

para su referencia, el código está en fragmento

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>

Expandir fragmento

Santosh Khalse
fuente

CSS para que el pie de página HTML permanezca en la parte inferior de la página con una altura mínima, pero no se superponga

Respuestas:

VER DEMO

Método de Flexbox:

`position:absolute` Método: (no permite la altura dinámica del pie de página)

Método de diseño de tabla:

Css

HTML

Dynamic one liner usando jQuery

Prima:

CSS para que el pie de página HTML permanezca en la parte inferior de la página con una altura mínima, pero no se superponga

Respuestas:

VER DEMO

Método de Flexbox:

position:absolute Método: (no permite la altura dinámica del pie de página)

Método de diseño de tabla:

Css

HTML

Dynamic one liner usando jQuery

Prima:

`position:absolute` Método: (no permite la altura dinámica del pie de página)