Wie ausrichten, Inhalt eines div auf der Unterseite?
Sagen, ich habe das folgende CSS-und HTML-code:
CSS:
#header {
height: 150px;
}
HTML:
<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>
Im Kopfbereich eine Feste Höhe, aber die header-Inhalt ändern kann.
Ich möchte den Inhalt des headers, um vertikal ausgerichtet sein, um die Unterseite der header-Abschnitt, so dass die Letzte Zeile der text "klebt" an der Unterseite der Kopfzeile.
Also, wenn es nur eine Zeile text wie es sein würde:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
Und wenn es drei Linien:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
Wie geht das in CSS?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Relative+absolute Positionierung ist Ihre beste Wette:
CSS:
HTML:
Aber Sie laufen kann, Probleme damit. Als ich es versucht habe hatte ich Probleme mit dropdown-Menüs, die unter dem Inhalt. Es ist einfach nicht schön.
Ehrlich gesagt, für vertikale Zentrierung Probleme und naja, vertikale Ausrichtung Probleme mit den items nicht Feste Höhe, ist es einfacher, nur die Benutzung von Tabellen.
Beispiel: Kannst du das HTML layout ohne Tabellen?
p
element, oder zumindest einspan
#header
hat eine Feste Höhe, hier ist ein quick-hack:#header-content { position: relative; bottom: -4px; }
(ändern Sie die -4px, um welchen Wert für Sie arbeitet), dies ist ein bisschen schmutzig, aber hat den Vorteil, dass#header
halten Sie Ihre Positionierung (ie. statisch), falls erforderlich. Ansonsten gehen für @Cletus Lösung.text-align: center
), die Sie verwenden können :left: 0; right: 0;
zusätzlich zu dem, was Cletus sagte.display: table-cell
odertable-row
odertable
. Sie müssen nie wieder zu der Verwendung von Tabellen für Reine layout.Verwenden Sie die CSS-Positionierung.
Als cletus notiert haben, müssen Sie identifizieren die header-Inhalte um diese Arbeit zu machen.
width = '100%'
auf den header-Inhalt<span>
Elemente habendisplay: inline;
standardmäßig, die nicht die volle Breite des Containers ein. Die entsprechenden Update wäre zum ändern der Spanne, um eine<div>
, das ist ein block-element standardmäßig.Ich diese Eigenschaften verwenden, und es funktioniert!
table-cell
wird Ihnen nicht erlauben, zu verwendenmin-height
(zumindest in Chrome 34). Leider war eine Voraussetzung für mich, sonst wäre das genau die Lösung, die ich suchte. (Bekommt immer noch mein upvote!)table-cell
bricht eine Menge Dinge. Wie das Bootstrap-grid-system.col-md-12
wird nicht geben Ihnen einen 100% Breite div mehr.position: absolute
zu #header. Wäre schön, wenn es auch alle weiteren Bedingungen erforderlich. Wie position sollte nicht absolut sein.display: table-cell
elementposition: absolute
haben unerwünschte Folgen.Wenn Sie nicht besorgt über ältere Browser verwenden Sie einen flexbox.
Das übergeordnete element muss seine Anzeige Typ flex
Dann setzen Sie das Kind-element ausrichten-selbst zu flex-end.
Hier ist die Ressource, die ich verwendet, um zu lernen:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Nach kämpfen mit diesem Problem seit einiger Zeit, habe ich endlich herausgefunden, eine Lösung, erfüllt alle meine Anforderungen:
Die Lösung dauert nur eine
<div>
, ich nenne Sie die "aligner":CSS
html
Dieser trick funktioniert, indem ein großer, magerer div, der schiebt die text-Grundlinie an der Unterseite des Behälters.
Hier ist ein vollständiges Beispiel, das erreicht, was der OP fragte. Ich habe die "bottom_aligner" dick und rot nur für die demonstration.
CSS:
HTML:
::before
Regel, die beseitigt die Notwendigkeit für ein zusätzliches element. Wir verwendet, flex an dem Ende, aber dies ist nützlich, wenn Sie das nicht können.height
von der box/container, und seine Eltern eingestellt ist (zu px oder % oder was auch immer).Die moderne Art zu tun, es wäre mit flexbox. Siehe das Beispiel unten. Sie brauchen noch nicht einmal zu wickeln
Some text...
in alle HTML-Tags, da der text direkt enthalten, in einem flex-container wird verpackt in einem anonymen flex-Element.CSS:
HTML:
Wenn es nur text, und Sie möchten, richten Sie Sie vertikal zum Boden des Behälters.
CSS:
HTML:
position:absolute;
. Diese Lösung funktionierte perfekt für mein Fall!Inline oder inline-block-Elemente können ausgerichtet werden an der Unterseite des block-level-Elementen, wenn die line-height der Eltern/block-element ist größer als die der inline-element.*
markup:
css:
*stellen Sie sicher, Sie sind in standards-Modus
<h1>
innerhalb einer<p>
oder<div>
würde ichjustify-content: space-between
.Können Sie einfach erzielt flex
CSS:
HTML:
Wenn Sie mehrere, dynamische Höhe Elemente, verwenden Sie die CSS-display-Werte table und table-cell:
HTML
CSS
Habe ich einen JSBin demo hier: http://jsbin.com/INOnAkuF/2/edit
Die demo hat auch ein Beispiel, wie man vertikal zentrieren ausrichten, mit der gleichen Technik.
Hier ist der flexy Weg, es zu tun. Natürlich, es ist nicht unterstützt durch IE8, wie der Benutzer benötigt, vor 7 Jahren. Je nachdem, was Sie brauchen, zu unterstützen, einige von diesen verzichtet werden kann.
Immer noch, es wäre schön, wenn es einen Weg gibt, dies zu tun ohne einen äußeren container, nur der text richtet sich in seinem eigenen selbst.
eine sehr einfache, one-line-Lösung, ist das hinzufügen von line-heigth auf das div, in dem Bewusstsein, dass alle div ' s wird der text unten gehen.
CSS:
HTML:
beachten Sie, dass dies ist eine praktische und schnelle Lösung, wenn Sie wollen einfach nur text im div nach unten gehen, wenn Sie brauchen, um zu kombinieren Bilder und Sachen, müssen Sie code ein wenig komplexer und responsiver CSS -
Brauchen Sie nicht absolute+relative für diese. Es ist sehr viel möglich mit der relativen position für die beiden container und Daten. Dies ist, wie Sie es tun.
Übernehmen Höhe Ihrer Daten
x
. Ihr container ist relativ und Fußzeile ist auch relativ. Alles, was Sie tun müssen, ist fügen Sie Ihre DatenIhre Daten immer auf dem Boden des Containers. Funktioniert auch, wenn Sie haben container mit dynamischer Höhe.
HTML-Code wie dieser
CSS werden, wie dies
Live-Beispiel hier
Hoffe, das hilft.
bottom: -webkit-calc(-100% + x);
ist zu tun?Hier ist eine andere Lösung mit flexbox, aber ohne Verwendung flex-end für unten ausrichten. Die Idee ist, um
margin-bottom
auf h1 zu auto schieben Sie den restlichen Inhalt auf den Boden:CSS:
HTML:
Wir können auch das gleiche tun mit
margin-top:auto
auf den text, aber in diesem Fall müssen wir wickeln ihn in eindiv
oderspan
:CSS:
HTML:
wenn Sie können die Höhe der Verpackung div des Inhalts ("#header-Inhalte, wie gezeigt, in der anderen Antwort), nicht den gesamten #header, vielleicht können Sie auch versuchen, diesen Ansatz:
HTML
CSS
zeigen Sie auf codepen
Scheint zu funktionieren:
HTML:
Ich bin an der Unterseite
css:
Fand ich diese Lösung bassed auf eine Standard-bootstrap-Vorlage starten
CSS:
HTML:
Ich weiß, das ist über 2 Jahre alt, aber ich entwickelte eine Methode, die viel einfacher als das, was erwähnt worden ist.
Legen Sie die Höhe des header-div. Dann innerhalb, dass, Stil, Ihre H1-tag wie folgt:
Arbeite ich an einer Website für einen Kunden, und das design erfordert der text am unteren Rand eines bestimmten div. Ich habe erreicht das Ergebnis mit diesen beiden Zeilen, und es funktioniert gut. Auch, wenn der text nicht zu erweitern, ist die Polsterung immer noch die gleichen bleiben.
All diese Antworten und keiner für mich gearbeitet... ich bin kein flexbox-Experte, aber das war ziemlich einfach, herauszufinden,, es ist einfach und leicht zu verstehen und zu verwenden. Zu trennen, etwas von dem rest des Inhalts, legen Sie eine leere div-Element und lassen Sie es wachsen, um den Raum zu füllen.
https://jsfiddle.net/8sfeLmgd/1/
Dieser reagiert wie erwartet, wenn Sie den unteren Inhalt ist keine Feste Größe, auch wenn der container keine Feste Größe.
versuchen mit:
versuchen Sie, die % um es zu beheben. Beispiel: 120% oder 90% ...usw.
Perfekte cross-browser-Beispiel ist wohl dieses hier:
http://www.csszengarden.com/?cssfile=/213/213.css&page=0
Die Idee ist die Anzeige der div am unteren Rand und macht es auch stick gibt. Oft der einfache Ansatz wird der sticky-div scrollen Sie mit den wichtigsten Inhalten.
Folgenden wird ein voll funktionsfähiges minimal-Beispiel. Beachten Sie, dass es keine div einbetten Tricks erforderlich. Die vielen BRs sind einfach zu zwingen, eine scrollbar angezeigt:
Wenn Sie sich Fragen, Ihr code möglicherweise nicht in IE, denken Sie daran, fügen Sie die DOCTYPE-tag an der Spitze. Es ist von entscheidender Bedeutung für diese Arbeit auf den IE. Auch dies sollte der erste tag und es sollte nichts erscheinen oben.
<br />
tags...content-type
header in den browser werfen Sie einen xml-parsing-Fehler.Die Website, die ich habe gerade für einen Kunden gebeten, den text für die Fußzeile wurde eine hohe box, mit dem text unten, den ich erreicht dies mit einfachen padding, sollte funktionieren mit allen Browsern.
padding: 0 30px
ist ein wenig überflüssig, kann man da auch habenpadding: 30px
dann die anderen 2 Erklärungen.padding: 60px 30px 8px;
,padding: 60px 30px 8px 30px;
vier explizitepadding-
Regeln, oder auch @TheWaxMann Vorschlag sind alle superior - und ich bin bereit und in der Lage zu argumentieren, dass eine eins 😉Scheint zu funktionieren:
Mit weniger macht die Lösung des CSS-Rätsel, viel mehr wie die Codierung als wie... ich Liebe CSS. Es ist ein echtes Vergnügen, wenn Sie ändern können das gesamte layout (ohne Sie kaputt zu machen 🙂 nur, indem Sie einen parameter ändern.
2015 Lösung
http://codepen.io/anon/pen/qERMdx
Ihre willkommen