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?
quelle
p
Element sein, oder zumindest einspan
display: table-cell
odertable-row
odertable
. Sie müssen nie wieder Tabellen für ein reines Layout verwenden.Verwenden Sie die CSS-Positionierung:
Wie bereits erwähnt , müssen Sie den Header-Inhalt identifizieren, damit dies funktioniert.
quelle
width = '100%'
<span>
Elementedisplay: inline;
standardmäßig die volle Breite des Containers einnehmen. Die am besten geeignete Lösung wäre, die Spanne in a zu ändern<div>
, was standardmäßig ein Blockelement ist.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
Dann setzen Sie das Align-Self des untergeordneten Elements auf Flex-End.
Hier ist die Ressource, die ich zum Lernen verwendet habe: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
quelle
Ich benutze diese Eigenschaften und es funktioniert!
quelle
table-cell
bricht viele Dinge. Wie das Bootstrap-Grid-System.col-md-12
gibt dir kein 100% breites Div mehr.Nachdem ich einige Zeit mit demselben Problem zu kämpfen hatte, fand ich endlich eine Lösung, die alle meine Anforderungen erfüllt:
Die Lösung braucht nur eine
<div>
, die ich "Aligner" nenne:CSS
html
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:
HTML:
quelle
::before
Regel eingefügt wird, die die Notwendigkeit eines zusätzlichen Elements beseitigt. Wir haben am Ende Flex verwendet, aber das ist nützlich, wenn Sie nicht können.height
der Box / des Containers und seiner Eltern gesetzt ist (auf px oder% oder was auch immer).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.Wenn nur Text vorhanden ist und Sie vertikal am unteren Rand des Containers ausgerichtet werden möchten.
quelle
position:absolute;
. Diese Lösung hat in meinem Fall perfekt funktioniert!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:
CSS:
* Stellen Sie sicher, dass Sie sich im Standardmodus befinden
quelle
quelle
<h1>
ist in einem<p>
oder<div>
würde ich verwendenjustify-content: space-between
.Sie können einfach Flex erreichen
quelle
Wenn Sie mehrere dynamische Höhenelemente haben, verwenden Sie die CSS-Anzeigewerte von Tabelle und Tabellenzelle:
HTML
CSS
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.
quelle
Hier ist eine andere Lösung mit Flexbox, jedoch ohne Flex-End für die Bodenausrichtung. Die Idee ist,
margin-bottom
auf h1 auf auto zu setzen, um den verbleibenden Inhalt nach unten zu verschieben:Wir können dasselbe auch mit
margin-top:auto
dem Text tun, aber in diesem Fall müssen wir ihn in eindiv
oder einschließenspan
:quelle
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änzenIhre Daten befinden sich immer am Ende Ihres Containers. Funktioniert auch, wenn Sie einen Container mit dynamischer Höhe haben.
HTML wird so sein
CSS wird so sein
Live Beispiel hier
Hoffe das hilft.
quelle
bottom: -webkit-calc(-100% + x);
tut?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.
quelle
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:
HTML:
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
quelle
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
CSS
auf Codepen anzeigen
quelle
Scheint zu funktionieren:
HTML: Ich bin ganz unten
CSS:
quelle
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/
Dies reagiert wie erwartet, wenn der Bodeninhalt keine feste Größe hat, auch wenn der Behälter keine feste Größe hat.
quelle
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
H1
Tag wie folgt: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.
quelle
Ich fand diese Lösung auf einer Standard-Bootstrap-Startvorlage
quelle
quelle
Versuche es mit:
Versuchen Sie,% zu ändern, um das Problem zu beheben. Beispiel: 120% oder 90% ... usw.
quelle
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.
quelle
padding: 0 30px
ist etwas überflüssig, Sie könnenpadding: 30px
dann auch die anderen 2 Deklarationen setzen.padding: 60px 30px 8px;
,padding: 60px 30px 8px 30px;
, Vier explizitepadding-
Regeln oder sogar @ TheWaxMann Vorschlag sind alle überlegen - und ich bin bereit und in der Lage , dass man argumentieren ;-)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:
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.
quelle
<br />
Tags auch selbst schließen ...content-type
Header bereitstellen, wird vom Browser ein XML- Analysefehler ausgegeben .Scheint zu funktionieren:
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.
quelle
2015 Lösung
http://codepen.io/anon/pen/qERMdx
Ihr Willkommen
quelle