Powiedzmy, że mam następujący kod CSS i HTML:
#header {
height: 150px;
}
<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>
Sekcja nagłówka ma stałą wysokość, ale zawartość nagłówka może się zmieniać.
Chciałbym, aby zawartość nagłówka była wyrównana pionowo do dolnej części sekcji nagłówka, więc ostatnia linia tekstu "przykleja się" do dolnej części sekcji nagłówka.
Więc jeśli jest tylko jedna linia tekstu, byłoby to jak:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
A gdyby były trzy linie:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
Jak można to zrobić w CSS?
Względne+absolutne pozycjonowanie jest najlepszym rozwiązaniem:
#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>
Ale możesz napotkać problemy z tym. Kiedy to wypróbowałem, miałem problemy z rozwijanym menu pojawiającym się pod treścią. To po prostu nie jest ładne.
Szczerze mówiąc, jeśli chodzi o problemy z pionowym centrowaniem i, cóż, wszelkie problemy z pionowym wyrównywaniem elementów, które nie mają stałej wysokości, łatwiej jest po prostu używać tabel.
Użyj pozycjonowania 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;
}
Jak zauważył cletus, musisz zidentyfikować header-content, aby to zadziałało.
<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>