Presta atención porque en este enunciado vas a hallar la respuesta que buscas.Esta noticia ha sido evaluado por nuestros especialistas para garantizar la calidad y exactitud de nuestro contenido.
Solución:
El posicionamiento relativo+absoluto es su mejor apuesta:
#header
position: relative;
min-height: 150px;
#header-content
position: absolute;
bottom: 0;
left: 0;
#header, #header *
background: rgba(40, 40, 100, 0.25);
Title
Some content
Pero puede tener problemas con eso. Cuando lo probé, tuve problemas con los menús desplegables que aparecían debajo del contenido. Simplemente no es bonito.
Honestamente, para problemas de centrado vertical y, bueno, cualquier problema de alineación vertical con los elementos que no son de altura fija, es más fácil usar tablas.
Ejemplo: ¿Puedes hacer este diseño HTML sin 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 señaló Cletus, debe identificar el contenido del encabezado para que esto funcione.
some header content
bottom
Si no le preocupan los navegadores heredados, use un flexbox.
El elemento principal necesita que su tipo de visualización se establezca en flex
div.parent
display: flex;
height: 100%;
Luego, configura la autoalineación del elemento secundario en flex-end.
span.child
display: inline-block;
align-self: flex-end;
Aquí está el recurso que usé para aprender: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Aquí tienes las comentarios y calificaciones
Acuérdate de que tienes la opción de valorar este artículo si te fue de ayuda.