Hoe lijn je de inhoud van een div uit op de bodem

Stel dat ik de volgende CSS en HTML code heb:

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

De header sectie heeft een vaste hoogte, maar de inhoud van de header kan veranderen.

Ik zou graag willen dat de inhoud van de header verticaal uitgelijnd wordt naar de onderkant van de header sectie, zodat de laatste regel tekst "plakt" aan de onderkant van de header sectie.

Dus als er maar één regel tekst is, zou het zijn als:

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

En als er drie regels waren:

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

Hoe kan dit in CSS?

Peter Mortensen
Bewerkte vraag 19de4 juli 2019 в 8:56
Programmering
html css vertical-alignment
25ste2 februari 2009 в 1:15
17 views
Oplossing

Relatieve+absolute positionering is je beste gok:

#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>

Maar daar kun je problemen mee krijgen. Toen ik het probeerde had ik problemen met dropdown menu's die onder de inhoud verschenen. Het is gewoon niet mooi.

Eerlijk gezegd, voor verticale centrering problemen en, nou ja, alle verticale uitlijning problemen met de items zijn'niet vaste hoogte, het'is makkelijker om gewoon tabellen te gebruiken.

Voorbeeld: Kun je deze HTML lay-out doen zonder tabellen te gebruiken?

GKFX
Bewerkt antwoord 20ste2 september 2017 в 11:21
Commentaren (12)

Gebruik CSS positionering:

/* 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;
}

Zoals cletus opmerkte, moet je de header-inhoud identificeren om dit te laten werken.

<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>
Peter Mortensen
Bewerkt antwoord 19de4 juli 2019 в 9:11
Commentaren (5)

Ik gebruik deze eigenschappen en het werkt!

#header {
  display: table-cell;
  vertical-align: bottom;
}
Igor Ivancha
Bewerkt antwoord 9de1 februari 2016 в 10:32
Commentaren (13)