So richten Sie 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, der Header-Inhalt kann sich jedoch ändern.

Ich möchte, dass der Inhalt der Kopfzeile vertikal am unteren Rand des Kopfzeilenbereichs ausgerichtet wird, sodass die letzte Textzeile am unteren Rand des Kopfzeilenbereichs "haftet".

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

-----------------------------
| Header-Titel
|
|
|
| Header-Inhalt (ergibt eine Zeile)
-----------------------------

Und wenn es drei Zeilen gäbe:

-----------------------------
| Header-Titel
|
| Header-Inhalt (was so ist
| viel Zeug, dass es perfekt ist
| erstreckt sich über drei Zeilen)
-----------------------------

Wie kann das in CSS gemacht werden?

Relative + absolute Positionierung ist die beste Wahl:

#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 Probleme damit haben. Als ich es versuchte, hatte ich Probleme mit Dropdown-Menüs, die unter dem Inhalt angezeigt wurden. Es ist einfach nicht schön.

Ehrlich gesagt, bei Problemen mit der vertikalen Zentrierung und bei Problemen mit der vertikalen Ausrichtung der Elemente ist die Höhe nicht festgelegt. Es ist einfacher, nur Tabellen zu verwenden.

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

Verwenden Sie die 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 bereits erwähnt , müssen Sie den Header-Inhalt identifizieren, 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>

Wenn Sie sich keine Sorgen ü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 untergeordneten Elements auf Flex-End.

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

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

Ich benutze diese Eigenschaften und es funktioniert!

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

Nachdem ich einige Zeit mit demselben Problem zu kämpfen hatte, fand ich endlich 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 einer eigenen Ebene (dh er wird normalerweise in den Container div eingebettet).
• Funktioniert über alle Browser hinweg (IE8 +).
• Einfach zu implementieren.

Die Lösung braucht nur eine <div>, die ich "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 Textgrundlinie an den Boden des Containers verschiebt.

Hier ist ein vollständiges Beispiel, das das erreicht, wonach das OP gefragt hat. 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>

Die moderne Art, dies zu tun, wäre die Verwendung von Flexbox . Siehe das folgende Beispiel. Sie müssen nicht einmal Some text...in ein HTML-Tag einbrechen, 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 Text vorhanden ist und Sie vertikal am unteren Rand des Containers ausgerichtet werden 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>

Inline- oder Inline-Block-Elemente können am unteren Rand von Elementen auf Blockebene ausgerichtet werden, wenn die Zeilenhöhe des übergeordneten / Block-Elements größer als die des Inline-Elements ist. *

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

* Stellen Sie sicher, dass Sie sich im Standardmodus befinden

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

Sie können einfach Flex erreichen

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 Sie mehrere dynamische Höhenelemente haben, 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 enthält auch ein Beispiel für die vertikale Ausrichtung mit derselben Technik.

Hier ist eine andere Lösung mit Flexbox, jedoch ohne Flex-End für die Bodenausrichtung. Die Idee ist, margin-bottomauf h1 auf auto zu setzen, um den verbleibenden Inhalt nach unten zu verschieben:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>

Wir können dasselbe auch mit margin-top:autodem Text tun, aber in diesem Fall müssen wir ihn in ein divoder einschließen span:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}

<div id="header">
  <h1>Header title</h1>
  <span>Header content (one or multiple lines)</span>
</div>

Sie brauchen dafür kein absolutes + relatives. Es ist sehr gut möglich, die relative Position sowohl für den Container als auch für die Daten zu verwenden. Das ist wie man es macht.

Angenommen, die Höhe Ihrer Daten wird sein x. Ihr Container ist relativ und die Fußzeile ist auch relativ. Alles was Sie tun müssen, ist Ihre Daten zu ergänzen

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

Ihre Daten befinden sich immer am Ende Ihres Containers. Funktioniert auch, wenn Sie einen 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.

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

Trotzdem wäre es schön, wenn es eine Möglichkeit gäbe, dies ohne einen äußeren Container zu tun. Lassen Sie den Text einfach in sich selbst ausrichten.

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

Eine sehr einfache, einzeilige Lösung besteht darin, dem Div eine Zeilenhöhe hinzuzufügen, wobei zu berücksichtigen ist, dass der gesamte Text des Divs nach unten geht.

CSS:

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML:

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

Denken Sie daran, dass dies eine praktische und schnelle Lösung ist, wenn Sie nur möchten, dass der Text in div nach unten geht. Wenn Sie Bilder und Inhalte kombinieren müssen, müssen Sie etwas komplexeres und reaktionsfähigeres CSS codieren

Wenn Sie die Höhe des Wrapping-Divs des Inhalts (# Header-Inhalt, wie in der Antwort anderer gezeigt) anstelle des gesamten # Headers festlegen könnten, können Sie möglicherweise auch diesen Ansatz ausprobieren:

HTML

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

auf Codepen anzeigen

Scheint zu funktionieren:

HTML: Ich bin ganz unten

CSS:

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

Alle diese Antworten und keine haben bei mir funktioniert ... Ich bin kein Flexbox-Experte, aber das war einigermaßen leicht herauszufinden, es ist einfach und leicht zu verstehen und zu verwenden. Um etwas vom Rest des Inhalts zu trennen, fügen Sie ein leeres div ein und lassen Sie es wachsen, um den Raum zu füllen.

https://jsfiddle.net/8sfeLmgd/1/

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
}

.filler {
  flex: 1 1;
}

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

Dies reagiert wie erwartet, wenn der Bodeninhalt keine feste Größe hat, auch wenn der Behälter keine feste Größe hat.

Ich habe einen Weg gefunden, der viel einfacher ist als das, was erwähnt wurde.

Stellen Sie die Höhe des Header-Div ein. Gestalten Sie dann Ihr H1Tag wie folgt:

float: left;
padding: 90px 10px 11px

Ich arbeite an einer Site für einen Kunden, und für das Design muss sich der Text am Ende eines bestimmten Bereichs befinden. Ich habe das Ergebnis mit diesen beiden Zeilen erzielt und es funktioniert gut. Wenn der Text erweitert wird, bleibt die Auffüllung unverändert.

Ich fand diese Lösung auf einer Standard-Bootstrap-Startvorlage

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

Versuche es mit:

div.myclass { margin-top: 100%; }

Versuchen Sie,% zu ändern, um das Problem zu beheben. Beispiel: 120% oder 90% ... usw.

Die Site, die ich gerade für einen Kunden erstellt habe, forderte, dass der Fußzeilentext ein hohes Feld ist. Der Text unten, den ich mit einfachem Auffüllen erreicht habe, sollte für alle Browser funktionieren.

<div id="footer">
  some text here
</div>

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

Ein perfektes browserübergreifendes Beispiel ist wahrscheinlich dieses hier:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

Die Idee ist sowohl, das Div unten anzuzeigen als auch dort festzuhalten. Oft führt der einfache Ansatz dazu, dass das klebrige Div mit dem Hauptinhalt nach oben rollt.

Das Folgende ist ein voll funktionsfähiges Minimalbeispiel. Beachten Sie, dass keine Tricks zum Einbetten von Divs erforderlich sind. Die vielen BRs dienen nur dazu, das Anzeigen einer Bildlaufleiste zu erzwingen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

Wenn Sie sich fragen, ob Ihr Code im IE möglicherweise nicht funktioniert, denken Sie daran, das DOCTYPE-Tag oben hinzuzufügen. Es ist entscheidend, dass dies im IE funktioniert. Dies sollte auch das erste Tag sein und nichts sollte darüber erscheinen.

Scheint zu funktionieren:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

Wenn Sie weniger verwenden, ähnelt das Lösen von CSS-Rätseln eher dem Codieren als dem ... Ich liebe CSS einfach. Es ist eine wahre Freude, wenn Sie das gesamte Layout ändern können (ohne es zu beschädigen :), indem Sie nur einen Parameter ändern.

2015 Lösung

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

Ihr Willkommen