Tarkime, turiu tokį CSS ir HTML kodą:
#header {
height: 150px;
}
<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>
Antraštės dalis yra fiksuoto aukščio, tačiau antraštės turinys gali keistis.
Norėčiau, kad antraštės turinys būtų vertikaliai sulygiuotas su antraštės skyriaus apačia, kad paskutinė teksto eilutė "priliptų" prie antraštės skyriaus apačios.
Taigi, jei yra tik viena teksto eilutė, ji būtų tokia:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
O jei būtų trys eilutės:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
Kaip tai galima padaryti CSS?
Santykinis ir absoliutus padėties nustatymas yra geriausias pasirinkimas:
#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>
Tačiau dėl to galite susidurti su problemomis. Kai bandžiau tai daryti, turėjau problemų dėl išskleidžiamųjų meniu, rodomų po turiniu. Tai tiesiog negražu.
Tiesą sakant, dėl vertikalaus centravimo problemų ir bet kokių vertikalaus lygiavimo problemų, kai elementai nėra fiksuoto aukščio, paprasčiau naudoti lenteles.
Pavyzdys: Ar galite padaryti šį HTML maketą nenaudodami lentelių?
Naudokite CSS pozicionavimą:
/* 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;
}
Kaip pastebėjo cletus, kad tai veiktų, reikia nustatyti antraštės turinį.
<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>