it-swarm.com.de

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 Headerabschnitt hat eine feste Höhe, der Headerinhalt kann sich jedoch ändern.

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

Wenn es also nur eine Textzeile gibt, wäre das 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 geht das mit CSS?

1075
kristof

Relative + absolute Positionierung ist Ihre 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 unterhalb des Inhalts angezeigt wurden. Es ist einfach nicht hübsch.

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 ausführen?

1235
cletus

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

Als Cletus vermerkt 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>
148

Ich benutze diese Eigenschaften und es funktioniert!

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

Wenn Sie sich keine Sorgen um ä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 verwendet habe, um zu lernen: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

100
Lee Irvine

Nachdem ich einige Zeit mit demselben Problem zu kämpfen hatte, fand ich endlich eine Lösung, die all meine Anforderungen erfüllt:

  • Benötigt nicht, dass ich die Höhe des Containers kenne.
  • Im Gegensatz zu relativen und absoluten Lösungen schwebt der Inhalt nicht in einer eigenen Ebene (d. H. Er wird normalerweise in das Container-Div eingebettet).
  • Funktioniert in allen Browsern (IE8 +).
  • Einfach zu implementieren.

Die Lösung benötigt nur einen <div>, den 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 ...

Bei diesem Trick wird ein großes, dünnes Div erstellt, das die Textbasislinie an den unteren Rand des Containers schiebt.

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>

Align bottom content

62
Greg Prisament

Die moderne Art, dies zu tun, wäre die Verwendung von flexbox . Siehe das folgende Beispiel. Sie müssen Some text... nicht einmal in ein HTML-Tag einbinden, da Text, der direkt in einem Flex-Container enthalten ist, in ein anonymes Flex-Element eingebunden 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 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>
31
Stickers
display: flex;
align-items: flex-end;
24
user3053247

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

aufschlag:

<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

23
dougwig

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>
9
MK Vimalan

Wenn Sie über mehrere dynamische Höhenelemente verfügen, verwenden Sie die CSS-Anzeigewerte von table und table-cell:

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.

4
romiem

eine sehr einfache, einzeilige Lösung besteht darin, dem div die Zeilenhöhe hinzuzufügen, wobei zu berücksichtigen ist, dass der gesamte Text des div unten steht.

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 Text in div nicht mehr angezeigt wird. Wenn Sie Bilder und Inhalte kombinieren müssen, müssen Sie etwas komplexeres und reaktionsschnelleres CSS programmieren

3
Pablo Contreras

Hier ist die flexible Möglichkeit, dies zu tun. Natürlich wird es vom IE8 nicht unterstützt, da der Benutzer es 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. Der Text muss sich einfach in seinem eigenen 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;
}

Hier ist eine andere Lösung mit flexbox, jedoch ohne flex-end für die Ausrichtung nach unten. Die Idee ist, margin-bottom auf h1 zu setzen, um auto den restlichen 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:auto für den Text tun, aber in diesem Fall müssen wir ihn in div oder span einschließen:

#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>
2
Temani Afif

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

Angenommen, die Höhe Ihrer Daten ist x. Ihr Container ist relativ und die Fußzeile ist auch relativ. Sie müssen lediglich Ihre Daten ergänzen

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

Ihre Daten werden immer am Boden Ihres Containers sein. Funktioniert auch, wenn Sie einen Container mit dynamischer Höhe haben.

HTML wird so aussehen

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

CSS wird so aussehen

.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
Aditya Ponkshe

Scheint zu funktionieren:

HTML: Ich bin ganz unten

cSS:

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

Ich habe diese Lösung basierend auf einer bootstrap Standardstartvorlage gefunden

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

}
1
XMaster
#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>
1
user841657

wenn Sie die Höhe des Umbruch-Divs des Inhalts festlegen könnten (# Header-Inhalt wie in der Antwort eines anderen Benutzers gezeigt), können Sie statt des gesamten #Headers 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;
}

show on codepen

1
codeboy

Die Site, die ich gerade für einen Kunden gemacht habe, verlangte, dass der Fußzeilentext ein hohes Kästchen ist. Mit dem Text unten habe ich dies durch einfaches Auffüllen erreicht und sollte für alle Browser funktionieren.

<div id="footer">
  some text here
</div>
#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}
0
Nicki L. Hansen

Ein perfektes Cross-Browser-Beispiel ist wahrscheinlich das hier:

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

Die Idee ist, das Div am unteren Rand anzuzeigen und es auch dort festzuhalten. Oft führt die einfache Methode dazu, dass das Sticky Div mit dem Hauptinhalt nach oben scrollt.

Das Folgende ist ein voll funktionsfähiges Minimalbeispiel. Beachten Sie, dass keine Div-Einbettung erforderlich ist. Die vielen BRs sollen lediglich die Anzeige einer Bildlaufleiste 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>

Denken Sie daran, das DOCTYPE-Tag oben hinzuzufügen, wenn Sie sich fragen, ob Ihr Code möglicherweise nicht in IE funktioniert. Es ist wichtig, dass dies auf IE funktioniert. Dies sollte auch das erste Tag sein und nichts darüber angezeigt werden.

0
Fakeer

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 darin Ihr H1 -Tag wie folgt:

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

Ich arbeite an einer Site für einen Kunden, und für das Design muss der Text unter einem bestimmten Div stehen. Ich habe das Ergebnis mit diesen beiden Zeilen erreicht, und es funktioniert gut. Auch wenn der Text erweitert wird, bleibt der Abstand gleich.

0
mickburkejnr

Alle diese Antworten und keine funktionierten für mich ... Ich bin kein flexbox Experte, aber dies war einigermaßen einfach 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 auszufü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.

0
Mozfet

versuche es mit:

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

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

0
felix