el problema antiguo. Necesito colocar un elemento <footer> en la parte inferior de la página. Sin embargo, no tengo un div envoltorio.CSS y HTML5: ¿Coloca un <footer> en la parte inferior de la página? sin envoltorio?
estoy no tener la siguiente stucture ...
<body>
<header>
<section id="content">
<footer>
</body>
¿Hay una manera fácil de empujar el pie de página a la parte inferior si el contenido no es lo suficientemente alto?
Aparentemente, este sigue siendo la mejor manera de conseguir un pie de página que se adhieren a la parte inferior de la página:
Hazlo position: fixed; bottom: 0, height: xxx? Por supuesto, entonces se superpondría con cualquier contenido en caso de que la página realmente pasara por la parte inferior de la ventana. Quizás algunos JS detecten contenido "corto" y establezcan css según corresponda.
que había hecho una jsFiddle antes, echa un vistazo a este intento http://jsfiddle.net/kuyabiye/K5pYe/ resizin la ventana de resultados, si el contenido se desbordará el rollo se verá.
Dependiendo de su código puede no funcionar, pero me gustaría sugerir el establecimiento de su body a position:relative; y luego estableciendo footer en position:absolute; y bottom:0. En teoría, no se superpondrá a las cosas entonces.
Esto está trabajando muy bien para mí. ¡Gracias! – Riwels
Llegó con esta pregunta, y pensé en publicar lo que me he encontrado. Parece ser la forma ideal para mí.
CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
HTML5:
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
Todo el crédito va a http://mystrd.at/modern-clean-css-sticky-footer/
Funcionó para mí, ¡gracias! – user949300
ME ENCANTA esta opción. Tan agradable. Además, si está utilizando bootstrap, tenga cuidado de no confundir la clase '.footer' con el elemento' footer'. – Jess
Salida del HTML Fiddle
<header>
</header>
<section id="content">
</section>
<footer>
</footer>
CSS
body {
height: 100%;
}
footer {
width: 100%;
height: 200px;
}
jQuery
$(function() {
var footer = $('footer'),
footHgt = $('footer').outerHeight(),
bodyHgt = $('body').height();
footer
.css({
position: 'absolute',
left: '0',
top: bodyHgt - footHgt + 'px'
});
$(window).resize(function() {
var footer = $('footer'),
footHgt = $('footer').outerHeight(),
bodyHgt = $('body').height();
footer
.css({
position: 'absolute',
left: '0',
top: bodyHgt - footHgt + 'px'
});
});
});
Aquí es una solución que funciona muy bien para mí. Pegado al fondo, sin superposición con el contenido, sin necesidad de un envoltorio.
https://jsfiddle.net/vq1kcedv/
html:
<!DOCTYPE html>
<head>
<title>Footer</title>
</head>
<body>
<nav>Link1 Link2</nav>
<article>content</article>
<footer>Copyright</footer>
</body>
</html>
css:
html, body {
position: absolute;
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
body:after {
line-height: 100px; /* height of footer */
white-space: pre;
content: "\A";
}
footer {
position: absolute;
width: 100%;
height: 100px; /* height of footer */
bottom: 0px;
margin-top: -100px; /* height of footer */
}
Funcionó muy bien para mí. Gracias:) – boca
Sé que es una entrada antigua, pero quería dar mi propia solución (con javascript):
/* css */
footer { width:100%; bottom:0; }
/* javascript */
if ($("body").height() < $(window).height()) {
document.querySelector('footer').style = 'position:absolute;'
}
Debería funcionar con cualquier tipo de pie de página de cualquier tamaño.
EDIT: solución alternativa (sin necesidad de css):
/* footer */
if ($("body").height() < $(window).height()) { /* if the page is not long enouth, let's put some more margin to the footer */
var height = $(document).height() - $("body").height();
document.querySelector("footer").style.marginTop = height + "px";
}
Establece un margen inferior a los contenidos que es igual a la altura del pie de página – Jan