Digamos que eu tenho o seguinte código CSS e HTML:
#header {
height: 150px;
}
<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>
A seção de cabeçalho é de altura fixa, mas o conteúdo do cabeçalho pode mudar.
Eu gostaria que o conteúdo do cabeçalho fosse alinhado verticalmente ao fundo da seção de cabeçalho, para que a última linha de texto "sticks" ao fundo da seção de cabeçalho.
Então, se só há uma linha de texto, seria como:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
E se houvesse três linhas:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
Como isso pode ser feito no CSS?
O posicionamento relativo+absoluto é a sua melhor aposta:
#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>
Mas podes ter problemas com isso. Quando eu tentei, tive problemas com os menus suspensos que aparecem abaixo do conteúdo. It's simplesmente não é bonito.
Honestamente, para questões de centralização vertical e, bem, qualquer problema de alinhamento vertical com os itens são't altura fixa, é's mais fácil apenas de usar tabelas.
Exemplo: Você consegue fazer este layout HTML sem usar tabelas?
Use o posicionamento 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 observou, você precisa identificar o conteúdo do cabeçalho para fazer isso funcionar.
<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>