css - siempre - poner pie de pagina al final html
fuerza pie de página en la parte inferior de las páginas con poco contenido (4)
Aquí hay una solución que no requiere que el pie de página se coloque fuera del elemento de envoltorio principal, que es la forma en que la mayoría de las personas estructuran sus páginas.
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding-bottom: 1em; /* Height of footer */
min-height: 100%;
}
header {
background-color: #cff;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
background-color: #000;
}
<div class="wrapper">
<header>I am the header.</header>
<article>I am content that doesn''t fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
<footer>I am the footer.</footer>
</div>
Explicación
El elemento de envoltura llenará el 100% de la altura de la ventana gráfica. (También puede usar 100vh para la envoltura si no desea establecer la altura de los elementos html y del cuerpo). La envoltura también tiene un relleno inferior para crear un marcador de posición para que el pie de página se siente.
El pie de página se coloca absolutamente en la parte inferior de la envoltura y se asienta en el marcador de posición creado por el relleno inferior de la envoltura.
Esto significa que cuando la página no tiene barras de desplazamiento, el pie de página se colocará en la parte inferior. Sin embargo, cuando hay suficiente contenido para que aparezcan las barras de desplazamiento, el pie de página se colocará debajo del contenido.
Tengo una página con solo un par de líneas de contenido. Quiero que el pie de página sea empujado hacia abajo.
<div id="footer"></div>
No quiero usar
#footer
{
position:fixed;
bottom:0;
}
AKA Pie de página pegajoso
¿Es esto posible sin jQuery?
¿alguna sugerencia?
Esta solución Flexbox es más Flexbox y mucho más fácil de implementar:
HTML
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
Solo asegúrate de envolver los divs necesarios dentro del body .
Hay otro pie de página pegajoso de Ryan Fait que no usa la posición fija:
* {
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 -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 */
}
Probar la solución de pie de página pegajosa por Steve Hatcher
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {
margin: 0;
padding: 0;
}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to the total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
}
/* must be same height as the footer */
#footer {
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear: both;
}
/*Opera Fix*/
body:before {
/* thanks to Maleika (Kohoutec)*/
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/