Very short content
Tenía la siguiente página (deadlink: http://www.workingstorage.com/Sample.htm ) que tiene un pie de página que no puedo hacer se sienta en la parte inferior de la página.
Quiero que el pie de página
El CSS es heredado 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 fondo.
Un método simple es hacer que el cuerpo sea el 100% de tu página, con una min-height del 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 negativo superior:
#footer { clear: both; position: relative; z-index: 10; height: 3em; margin-top: -3em; }
Un enfoque muy simple que funciona bien en el navegador cruzado 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; }
He desarrollado un método bastante fácil para pegar el pie de página en la parte inferior, pero como métodos más comunes, tendrás que modificarlo para que se ajuste a la altura de tu pie de página.
Este método a continuación utiliza un “truco” al colocar un pseudo-elemento ::after en el body y configurarlo para que tenga la altura exacta del pie de página, de modo que ocupe exactamente el mismo espacio que el pie de página, de modo que cuando el pie de página esté posición absolute sobre él, parecería que el pie de página realmente ocupa espacio y elimina los efectos negativos de su posición absoluta (por ejemplo, revisar el contenido del cuerpo)
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; }
Header Content
Desde IE7 en adelante puedes simplemente usar
#footer { position:fixed; bottom:0; }
Ver caniuse para soporte.
Una solución simple que uso, funciona desde IE8 +
Proporcione min-height: 100% en html, de modo que si el contenido es menor, la página estática toma toda la altura del puerto de visualización y el pie 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 el contenido y sigue pegado al fondo.
Demostración de JS violín trabajando: http://jsfiddle.net/3L3h64qo/2/
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; }
Lo he usado para pegar el pie de página en la parte inferior y funcionó para mí:
HTML
Esa es la única modificación que tienes que hacer en el HTML, agrega ese div con la clase "allButFooter" . 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 fondo, y también las páginas el tiempo suficiente para que ya supiera que tenía que desplazarme. Hice esto, así que pude ver que funciona bien en el caso de que el contenido de una página sea dynamic.
CSS
.allButFooter { min-height: calc(100vh - 40px); }
La clase "allButFooter" tiene un valor de min-height que depende de la altura de la ventana 100vh ( 100vh significa el 100% de la altura de la ventana 100vh ) y la altura del pie de página, que ya sabía que era de 40px .
Eso es todo lo que hice, y funcionó perfectamente para mí. No lo he probado en todos los navegadores, solo Firefox, Chrome y Edge, y los resultados fueron los que yo quería. El pie de página se pega a la parte inferior, y no tiene que meterse con el índice Z, la posición o cualquier otra propiedad. La posición de cada elemento en mi documento era la posición predeterminada, no la cambié a absoluta o fija ni a nada.
Trabajando con un 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 alto, 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 es probablemente porque Twitter-Bootstrap viene con sus propios márgenes y almohadillas, por eso tuve que ajustar ese valor.
¡Espero que esto les sirva de algo! Al menos, es una solución simple de probar, y no implica hacer grandes cambios en todo el documento.
Una cosa de la que debemos desconfiar es en los dispositivos móviles, ya que implementan la idea de la ventana gráfica de una manera “inusual”:
Como tal, usando la position: fixed; (como he visto recomendado en otros lugares) por lo general no es el camino a seguir. Por supuesto, depende del comportamiento exacto que busca.
Lo que he usado y funcionó bien en computadoras de escritorio y dispositivos móviles es:
con
body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0; margin: 0; } #footer { position: absolute; bottom: 0; }
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 una display:table para todo el documento y display:table-row con height:0 para el pie de página.
Como el pie de página es el único niño del cuerpo que tiene una pantalla como table-row , se representa en la parte inferior de la página.
Mi método jquery, este pone el pie de página en la parte inferior de la página si el contenido de la página es menor que el alto de la ventana, o simplemente pone el pie de página después del contenido de otra manera:
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"); })();
Yo mismo he estado investigando este problema. He visto bastantes soluciones y cada una de ellas tenía problemas, a menudo con algunos números mágicos.
Entonces, al usar las mejores prácticas de varias fonts, se me ocurrió esta solución:
http://jsfiddle.net/vfSM3/248/
Lo que quería lograr específicamente aquí era conseguir que el contenido principal se desplazara 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; }
Esto se conoce como un pie de página adhesivo. Una búsqueda en Google para él produce muchos resultados. Un CSS Sticky Footer es el que he usado con éxito. Pero hay más.
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 del código, explicaré por qué funciona esto.
test header
Entonces, lo primero que hacemos es crear el contenedor más grande (html) al 100%. La página html es tan grande como la página misma. A continuación establecemos la altura del cuerpo, puede ser más grande que el 100% de la etiqueta html, pero al menos debe ser tan grande, por lo tanto, usamos la altura mínima del 100%.
También hacemos que el cuerpo sea relativo. Relativo significa que puede mover el elemento de bloque alrededor de su posición original relativa. No usamos eso aquí sin embargo. Porque el pariente tiene un segundo uso. Cualquier elemento absoluto es absoluto a la raíz (html) o al 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, el fondo.
El último paso es establecer el pie de página en absoluta e inferior: 0, que lo mueve al final del primer padre / abuelo que es relativo (por supuesto, el cuerpo).
Ahora todavía tenemos un problema que corregir, cuando completamos la página completa, el contenido va por debajo del pie de página. ¿Por qué? bien, porque el pie de página ya no está dentro del “flujo html”, porque es absoluto. Entonces, ¿cómo arreglamos esto? Añadiremos relleno al cuerpo. Esto asegura que el cuerpo en realidad es más grande que su contenido.
Espero haber dejado mucho en claro para ustedes, chicos.
Hacer esto
También puede leer sobre flex que es compatible con todos los navegadores modernos
Actualización : leí sobre flexión y lo intenté. Funcionó para mí Espero que haga lo mismo por ti. Aquí es cómo lo implementé. Aquí el main no es el 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 acerca de flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Tenga en cuenta que no es compatible con versiones anteriores de IE.
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; }
CSS “Always on the bottom” Footer
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.
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).
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).
This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with position: absolute; .
Simplemente configure el html, el cuerpo y las otras filas, excepto el pie de página, al 100%. p.ej
el CSS se convierte
html, body, header, content{ height:100%; }
Puedes hacerlo
.footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; text-align: center; }
Una solución flexible muy simple que no asume alturas fijas ni cambia la posición de los elementos.
HTML
CSS
.container { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; }
Soporte del navegador
Todos los navegadores principales, excepto IE11 y abajo.
Asegúrese de usar el Prefijo automático para los prefijos apropiados.
.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; } ///////////////////////////////////////////// header, main, footer { margin: 0; display: block; } header, footer { min-height: 80px; } header { background-color: #ccc; } main { background-color: #f4f4f4; } footer { background-color: orange; }
Todos los métodos de CSS que he encontrado son demasiado rígidos. Además, configurar el pie de página como fixed no es una opción si eso no forma parte del diseño.
Probado en:
Asumiendo este diseño:
Use la siguiente función jQuery:
$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
Lo que hace es establecer la min-height #content para #content a la altura de la ventana : la altura del pie de página que sea que pueda ser en ese momento.
Como usamos min-height , si #content height excede la altura de la ventana , la función se degrada graciosamente 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%; }
Very short content
Lo he usado en mis 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; }
Untitled Document Content Area