Digamos que tengo el siguiente código CSS y HTML:
-- begin snippet: js hide: false console: false babel: false -->
#header {
height: 150px;
}
<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>
...fin del fragmento..;
La sección de la cabecera es de altura fija, pero el contenido de la cabecera puede cambiar.
Me gustaría que el contenido de la cabecera se alinee verticalmente a la parte inferior de la sección de cabecera, por lo que la última línea de texto "se pega" a la parte inferior de la sección de cabecera.
Así que si sólo hay una línea de texto, sería como:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
Y si hubiera tres líneas:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
¿Cómo se puede hacer esto en CSS?
El posicionamiento relativo+absoluto es su mejor opción:
begin snippet: js hide: false console: false babel: false -->
#header {
position: relative;
min-height: 150px;
}
#header-content {
position: absolute;
bottom: 0;
left: 0;
}
#header, #header * {
background: rgba(40, 40, 100, 0.25);
}
<div id="header">
<h1>Title</h1>
<div id="header-content">Some content</div>
</div>
...fin del fragmento..;
Pero puedes tener problemas con eso. Cuando lo probé tuve problemas con los menús desplegables que aparecían debajo del contenido. No es bonito.
Honestamente, para los problemas de centrado vertical y, bueno, cualquier problema de alineación vertical con los elementos no son de altura fija, it's más fácil sólo para usar tablas.
Utilice el posicionamiento CSS:
/* Creates a new stacking context on the header */
#header {
position: relative;
}
/* Positions header-content at the bottom of header's context */
#header-content {
position: absolute;
bottom: 0;
}
Como cletus señaló, es necesario identificar el contenido de la cabecera para que esto funcione.
<span id="header-content">some header content</span>
<div style="height:100%; position:relative;">
<div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>