Frage Wie richtet man den Inhalt eines Divs nach unten aus?


Angenommen, ich habe den folgenden CSS- und HTML-Code:

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

Der Header-Abschnitt hat eine feste Höhe, aber der Header-Inhalt kann sich ändern. Ich möchte gerne den Inhalt des Headers vertikal auf den unteren Rand des Header-Bereichs ausrichten, so dass die letzte Textzeile am unteren Rand des Header-Bereichs "klebt".

Wenn es also nur eine Textzeile gibt, wäre es wie folgt:

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

Und wenn es drei Zeilen gäbe:

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

Wie kann dies in CSS getan werden?


955
2018-02-25 13:15


Ursprung


Antworten:


Relative + absolute Positionierung ist Ihre beste Wette:

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

Aber Sie könnten damit Probleme bekommen. Als ich es ausprobierte, hatte ich Probleme mit Dropdown-Menüs, die unter dem Inhalt erschienen. Es ist einfach nicht schön.

Ehrlich gesagt, für vertikale Zentrierung Probleme und, nun, alle vertikalen Ausrichtung Probleme mit den Elementen sind nicht feste Höhe, es ist einfacher, nur Tabellen zu verwenden.

Beispiel: Können Sie dieses HTML-Layout ohne Verwendung von Tabellen erstellen?


1134
2018-02-25 13:20



Verwenden Sie CSS-Positionierung.

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

Wie Cletus Beachten Sie, dass Sie den Header-Inhalt identifizieren müssen, damit dies funktioniert.

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

134
2018-02-25 13:18



Ich benutze diese Eigenschaften und es funktioniert!

#header {
  display: table-cell;
  vertical-align: bottom;
}

100
2018-04-25 09:43



Wenn Sie sich keine Gedanken über ältere Browser machen, verwenden Sie eine Flexbox.

Für das übergeordnete Element muss der Anzeigetyp auf flex eingestellt sein

div.parent {
  display: flex;
  height: 100%;
}

Dann setzen Sie das align-self des Kindelements auf flex-end.

span.child {
  display: inline-block;
  align-self: flex-end;
}

Hier ist die Ressource, die ich gelernt habe: http://css-tricks.com/snippets/css/a-guide-to-flexbox/


76
2017-08-25 20:46



Nachdem ich einige Zeit mit dem gleichen Problem zu kämpfen hatte, fand ich schließlich eine Lösung, die alle meine Anforderungen erfüllt:

  • Erfordert nicht, dass ich die Höhe des Containers kenne.
  • Im Gegensatz zu relativen + absoluten Lösungen schwebt der Inhalt nicht in seiner eigenen Ebene (d. H. Er wird normalerweise im Container div eingebettet).
  • Funktioniert über verschiedene Browser (IE8 +).
  • Einfach zu implementieren.

Die Lösung braucht nur einen <div>, die ich den "Aligner" nenne:

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

Dieser Trick funktioniert, indem ein großes, dünnes div erstellt wird, das die Textbasislinie an den unteren Rand des Containers verschiebt.

Hier ist ein vollständiges Beispiel, das erreicht, was das OP verlangte. Ich habe den "bottom_aligner" nur zu Demonstrationszwecken dick und rot gemacht.

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

Align bottom content


62
2017-07-18 17:11



Inline- oder Inline-Block-Elemente können am unteren Ende von Block-Level-Elementen ausgerichtet werden, wenn die Zeilenhöhe des Parent / Block-Elements größer ist als die des Inline-Elements. *

Markup:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

CSS:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* Vergewissern Sie sich, dass Sie sich im Standardmodus befinden


22
2017-12-04 22:16



Der moderne Weg wäre es zu benutzen Flexbox. Siehe das Beispiel unten. Sie müssen nicht einmal wickeln Some text... in ein beliebiges HTML-Tag, da Text, der direkt in einem Flex-Container enthalten ist, in ein anonymes Flex-Element eingeschlossen wird.

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}
<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

Wenn nur ein Text vorhanden ist und Sie ihn vertikal am unteren Rand des Containers ausrichten möchten.

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}
<section>Some text aligns to the bottom</section>


21
2017-11-24 02:53



display: flex;
align-items: flex-end;

16
2018-04-24 04:31



Wenn Sie mehrere Elemente mit dynamischer Höhe verwenden, verwenden Sie die CSS-Anzeigewerte von Tabelle und Tabellenzelle:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

Ich habe hier eine JSBin-Demo erstellt: http://jsbin.com/INOnAkuF/2/edit

Die Demo hat auch ein Beispiel, wie man mit derselben Technik vertikal zentriert.


3
2018-02-20 17:55



Sie brauchen nicht absolut + relativ dafür. Es ist sehr möglich, die relative Position für Container und Daten zu verwenden. Das ist wie man es macht.

Angenommen, die Höhe Ihrer Daten wird sein x. Ihr Container ist relativ und Fußzeile ist auch relativ. Sie müssen lediglich Ihre Daten hinzufügen

bottom: -webkit-calc(-100% + x);

Ihre Daten befinden sich immer am unteren Rand Ihres Containers. Funktioniert auch, wenn Sie Container mit dynamischer Höhe haben.

HTML wird so sein

<div class="container">
  <div class="data"></div>
</div>

CSS wird so sein

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Live-Beispiel hier

Hoffe das hilft.


2
2018-02-06 12:49



Hier ist der flexible Weg, es zu tun. Natürlich wird es nicht von IE8 unterstützt, wie der Benutzer vor 7 Jahren benötigt. Abhängig davon, was Sie unterstützen müssen, können einige davon entfernt werden.

Dennoch wäre es nett, wenn es einen Weg gäbe, dies ohne einen äußeren Container zu tun, sondern einfach den Text in sich selbst ausrichten zu lassen.

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

2
2018-06-07 20:33