div - title html css
Pie de página en la parte inferior de la página o contenido, el que sea más bajo (4)
Aquí ( haga que el pie de página se quede en la parte inferior de una página ) es una excelente publicación / tutorial para resolver su problema ... pruébelo.
Tengo la siguiente estructura:
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
Cargo contenido dinámicamente en el <article> usando javascript. Debido a esto, la altura del bloque <article> puede cambiar.
Quiero que el bloque <footer> esté en la parte inferior de la página cuando hay mucho contenido, o en la parte inferior de la ventana del navegador cuando solo existen unas pocas líneas de contenido.
Por el momento puedo hacer uno u otro ... pero no ambos.
Entonces, ¿alguien sabe cómo puedo hacer esto? Haga que el <footer> adhiera al pie de la página / contenido o la parte inferior de la pantalla, dependiendo de cuál sea más bajo.
Creo que por debajo de 2 líneas en css debería ser suficiente para obtener lo que desea.
#footer
{
position: relative ;
bottom: 0;
}
Funcionó para mí
El pie de página pegajoso de Ryan Fait es muy agradable, sin embargo, creo que le falta su estructura básica *.
Mi estructura base de elección es:
<div class="page">
<div class="page__inner">
<header class="header">
<div class="header__inner">
</div>
</header>
<nav class="nav">
<div class="nav__inner">
</div>
</nav>
<main class="wrapper">
<div class="wrapper__inner">
<div class="content">
<div class="content__inner">
</div>
</div>
<div class="sidebar">
<div class="sidebar__inner">
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__inner">
</div>
</footer>
</div>
</div>
Lo cual no está tan lejos de:
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
El truco para hacer que el pie de página se pegue es tener el pie de página anclado al acolchado inferior de su elemento contenedor. Esto requiere que la altura del pie de página sea estática, pero he encontrado que los pies de página son típicamente de altura estática.
HTML:<div id="main-wrapper">
...
<footer>
</footer>
</div>
CSS:
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
Con el pie de página anclado a #main-wrapper , ahora necesita #main-wrapper para que sea al menos el alto de la página, a menos que sus hijos sean más largos. Esto se hace haciendo que #main-wrapper tenga una min-height de 100% . También debe recordar que sus padres, html y body deben ser tan altos como la página también.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
Por supuesto, debería cuestionar mi opinión, ya que este código está forzando al pie de página a caer al pie de la página, incluso cuando no hay contenido. El último truco es cambiar el modelo de caja utilizado por #main-wrapper para que la min-height del 100% incluya el relleno de 100% 100px .
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
Y ahí lo tiene, un pie de página adhesivo con su estructura HTML original. Solo asegúrate de que la height del footer de footer sea igual a la padding-bottom #main-wrapper , y debes establecerlo.
Versión Flexbox
Si tiene la suerte de poder usar flexbox sin la necesidad de admitir navegadores más antiguos, los pies fijos se vuelven triviales y admiten un pie de página de tamaño dinámico.
El truco para que los pies de página se peguen al fondo con flexbox es tener otros elementos en el mismo contenedor flexionándose verticalmente. Todo lo que se necesita es un elemento contenedor de altura completa con display: flex y al menos un hermano con un valor flex mayor que 0 :
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
article {
flex: 1;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
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: 100%;
}
article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
* La razón por la cual encuentro fallas en la estructura de Fait es porque establece los elementos .footer y .header en diferentes niveles jerárquicos al tiempo que agrega un elemento .push innecesario.
El pie de página adhesivo de Ryan Fait es una solución simple que he usado varias veces en el pasado.
HTML básico :
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div class="content"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
CSS :
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer''s height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Traducir esto para que sea similar a lo que ya tiene resultados con algo similar a esto:
HTML :
<body>
<div class="wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<div class="push"></div>
</div>
<footer>
</footer>
</body>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer''s height */
}
footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
Simplemente no olvides actualizar el negativo en el margen del contenedor para que coincida con la altura de tu pie de página y empujar div. ¡Buena suerte!