personalizar - ¿Cómo pegar el elemento<footer> en la parte inferior de la página(HTML5 y CSS3)?
personalizar un widget en wordpress (4)
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">
body content....
</div>
<footer class="footer">
footer content....
</footer>
Actualizar
Como señaló @Martin, la "posición: relativa" no es obligatoria en el elemento .footer , lo mismo para clear:both . Estas propiedades solo están ahí como ejemplo. Por lo tanto, el mínimo css necesario para pegar el pie de página en la parte inferior debe ser:
html, body {
height: 100%;
margin: 0;
}
#wrap {
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
Además, hay un excelente artículo en css-tricks que muestra diferentes maneras de hacer esto: https://css-tricks.com/couple-takes-sticky-footer/
Cuando uso la posición relativa sin contenido, el pie de página sube, con absoluto con mucho contenido, el pie de página baja y, con la corrección , siempre está ahí.
¿Hay una manera fácil de llegar al final de la página independientemente del contenido, se reduce y crece con el contenido?
Cuando hay mucho contenido, podemos ver el pie de página en la primera página, y cuando hay poco contenido, veremos en la parte inferior.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
header {
position:fixed;
top:0;
width:100%;
height:40px;
background-color:#333;
padding:20px;
}
footer {
background-color: #333;
width: 100%;
bottom: 0;
position: relative;
}
#main{
padding-top:100px;
text-align:center;
}
</style>
</head>
<body>
<header>
header
</header>
<div id="main">
main
</div>
<footer>
footer
</footer>
</body>
</html>
Para el cambio de pie desde la position: relative; position:fixed;
footer {
background-color: #333;
width: 100%;
bottom: 0;
position: fixed;
}
Ejemplo: http://jsfiddle.net/a6RBm/
Yo usaría esto en HTML 5 ... Solo digo
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
acaba de establecer la position: fixed al elemento de pie de página (en lugar de relativo)
Tenga en cuenta que es posible que también deba establecer un margin-bottom al elemento main al menos igual a la altura del elemento del pie de página (por ejemplo, margin-bottom: 1.5em; ) de lo contrario, en algunas circunstancias, el área inferior del contenido principal podría estar parcialmente superpuesto por su pie de página