So richten Sie den Inhalt eines Divs nach unten aus

1164

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?

kristof
quelle

Antworten:

1322

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?

Cletus
quelle
4
Ich habe diese Lösung tatsächlich gefunden, bevor ich hier gefragt habe, aber irgendwie vergessen, die Position hinzuzufügen: relativ; auf den Header div und der Inhalt landete am Ende der Seite. Danke
kristof
15
Sie können Ihre Dropdown-Position mit der Eigenschaft z-index verwalten, um sie in den Vordergrund zu rücken. Denken Sie daran, dass die Eigenschaft z-index mit Elementen funktioniert, die relativ oder absolut positioniert sind. Auch ist semantisch gesehen nicht korrekt, eine Tabelle zu verwenden, um Layoutergebnisse zu erzielen.
Alejandro García Iglesias
1
Im Fall von Textinhalten, wie im ursprünglichen Problem beschrieben, sollte # Header-Inhalt wirklich ein pElement sein, oder zumindest einspan
Josh Burgess
2
Verwenden Sie keine Tabellen für nicht tabellarische Daten! Verwenden Sie stattdessen die CSS-Anzeigeeigenschaften display: table-celloder table-rowoder table. Sie müssen nie wieder Tabellen für ein reines Layout verwenden.
Jeremy Moritz
1
Die Position des Headers ist relativ zu was?
Stack1
158

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>
Patrick McElhaney
quelle
4
fyi ... dies führte dazu, dass mein Header-Inhalt seine Breite width = '100%'
reduzierte
2
@dsdsdsdsd Sie können dies auch beheben, indem Sie display: block zu # header-content hinzufügen.
Patrick McElhaney
1
@dsdsdsdsd Der Grund dafür ist, dass <span>Elemente display: 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.
BadHorsie
1
Oder eines von <h1> - <h6>, das ebenfalls standardmäßig blockiert ist und den Text als Überschrift identifiziert, was für Suchmaschinen, unterstützende Technologien und Personen, die den Code lesen, nützlich ist.
Patrick McElhaney
Funktioniert nicht, wenn der Inhalt auf der Unterseite eine variable Höhe hat und sich außerhalb der Containergrenzen erstreckt.
Mozfet
126

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/

Lee Irvine
quelle
@bafromca, zwei Gründe, die nicht funktionieren. 1: Verwenden Sie 'align-self' anstelle von align-items (mein Fehler, ich habe meinen ursprünglichen Beitrag bearbeitet). 2: 100% Höhe funktioniert nur, wenn der Elternteil Größe hat.
Lee Irvine
Hat bei mir nicht funktioniert, ich möchte es am Boden des Containers, nicht am Ende der Gegenstände im Container.
Mozfet
Im Jahr 2020 sollte dies die richtige Antwort sein: caniuse.com/#feat=flexbox
tonygatta
119

Ich benutze diese Eigenschaften und es funktioniert!

#header {
  display: table-cell;
  vertical-align: bottom;
}
Johannchopin
quelle
42
Wird in IE8 und früheren Versionen nicht unterstützt. Es wird in IE9 unterstützt.
random_user_name
23
@cale_b Nach caniuse.com es TUT Arbeit in IE8.
Zach Lysobey
5
@ZachL Happenstance - Ich unterstütze eine Legacy-App in IE8 für einen Unternehmenskunden, und das funktioniert tatsächlich .
Daniel Szabo
4
@fguillen: gerade auch in Chrome (v31) getestet. Funktioniert auch dort.
Daniel Szabo
5
table-cellbricht viele Dinge. Wie das Bootstrap-Grid-System. col-md-12gibt dir kein 100% breites Div mehr.
Noah
65

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>

Richten Sie den unteren Inhalt aus

Greg Prisament
quelle
Fast perfekt :) aber es erlaubt keine automatischen Zeilenumbrüche.
Gaston Sanchez
Funktioniert nicht, wenn der Außencontainer scrollen kann (overflow-y: auto). :(
ecraig12345
Ich denke , dass marin: 8px sollte margin: 8px
Graham Perrin
2
Dies funktioniert auch, wenn eine ::beforeRegel 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.
Sheepy
Dies ist eine wirklich schöne Lösung. Es funktioniert nur, wenn die heightder Box / des Containers und seiner Eltern gesetzt ist (auf px oder% oder was auch immer).
BairDev
38

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>

Aufkleber
quelle
2
Ich brauchte mein unten ausgerichtetes Element, um noch im Dokumentfluss vorhanden zu sein, was bei Verwendung nicht möglich ist position:absolute;. Diese Lösung hat in meinem Fall perfekt funktioniert!
Swen
1
Innerhalb der Reaktionskomponenten ist dies die richtige Lösung. Die akzeptierte Lösung schlägt fehl.
Soleil - Mathieu Prévot
1
Dies ist die einzige Lösung, die tatsächlich für mich funktioniert hat. Vielleicht hat es mit React zu tun, wie @Soleil erwähnt hat ... Ich bin kein CSS-Experte, daher bin ich mir nicht ganz sicher.
BK
Funktioniert perfekt in der Reaktionskomponente
user1155773
25

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

Dougwig
quelle
25
display: flex;
align-items: flex-end;
user3053247
quelle
2
Beachten Sie, dass Flexbox in alten Browsern nicht gut unterstützt wird .
AnthonyB
11
@AnthonyB - alt definieren? Wir müssen diesen Datensatz als Entwickler ändern. Die Technologie schreitet voran und die Alten überleben einfach nicht. IE9 und 10 haben Probleme mit Flex, soweit ich sehen kann, aber sie wurden 2011 bzw. 2012 veröffentlicht ... es ist 2017. Wir müssen diese veralteten und kaputten Browser loslassen. Wenn nicht zur visuellen Zufriedenheit, sondern zur Sicherheit und für allgemeine Software-Updates.
Tisch
3
@Tisch Sie haben absolut Recht, wir müssen als Entwickler anständige und aktuelle Technologie verwenden. Aber ich würde einfach vor diesem Kompatibilitätsproblem warnen, um nicht überrascht zu sein.
AnthonyB
wenn der Inhalt unter dem <h1>ist in einem <p>oder <div>würde ich verwenden justify-content: space-between.
Agapitocandemor
11

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>

MK Vimalan
quelle
6

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.

romiem
quelle
5

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>

Temani Afif
quelle
Perfecto! Gracias
Grace Nikole
4

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.

Aditya Ponkshe
quelle
Können Sie erklären, was bottom: -webkit-calc(-100% + x);tut?
mhatch
@mhatch hält die Fußzeile am unteren Rand des Containers.
Aditya Ponkshe
4

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;
}
Absynthe Minded Web Smith
quelle
4

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

Pablo Contreras
quelle
3

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

Codeboy
quelle
3

Scheint zu funktionieren:

HTML: Ich bin ganz unten

CSS:

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

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.

Mozfet
quelle
3

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.

mickburkejnr
quelle
1
Bewirkt, dass Inhalte beim Ändern der Größe von Bildschirmen mithilfe von reaktionsschnellen Layouts über andere Inhalte schweben.
Mozfet
2

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;

}
XMaster
quelle
2
#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>

user841657
quelle
1
Dies bewirkt eine Größenänderung des oberen Div. Dies funktioniert für grundlegende Textlayouts, funktioniert jedoch nicht, wenn die Hintergründe, Farben und Größen berücksichtigt werden müssen.
Mozfet
0

Versuche es mit:

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

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

felix
quelle
Funktioniert einwandfrei mit 1 Inhaltssatz, muss jedoch angepasst werden, wenn sich der Inhalt ändert. Wenn es sich um dynamischen Inhalt handelt, verwenden Sie diesen nicht!
Mike Graf
0

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;
}
Nicki L. Hansen
quelle
1
Ihre erste Deklaration padding: 0 30pxist etwas überflüssig, Sie können padding: 30pxdann auch die anderen 2 Deklarationen setzen.
Andrew
Absolut wahr, aber ich folge den Praktiken meines Arbeitsplatzes.
Nicki L. Hansen
6
Wirklich?, Das scheint eine schlechte Praxis zu sein. Verwenden Sie einfach die Kurzschrift oder seien Sie überall explizit. padding: 60px 30px 8px;, padding: 60px 30px 8px 30px;, Vier explizite padding-Regeln oder sogar @ TheWaxMann Vorschlag sind alle überlegen - und ich bin bereit und in der Lage , dass man argumentieren ;-)
Zach Lysobey
-3

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.

Fälscher
quelle
28
Da Sie Ihr Dokument als XHTML-streng deklarieren, sollten Sie Ihre <br />Tags auch selbst schließen ...
Amos M. Carpenter
7
@ KarlKildén Wenn Sie sich auf den Kommentar von aaamos beziehen, ist dies definitiv kein dummer Kommentar. Wenn Sie das obige Dokument mit dem richtigen content-typeHeader bereitstellen, wird vom Browser ein XML- Analysefehler ausgegeben .
Rasiermesser
7
Das ist eine schlechte Praxis! Verwenden Sie stattdessen CSS!
M93a
-4

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.

insb
quelle
-7

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

waza123
quelle
3
Das Tabellenlayout hierfür kann problematisch sein. Stattdessen wird CSS empfohlen. Die Eigenschaft valign wird auch in HTML5 nicht unterstützt. (siehe w3schools.com/tags/att_td_valign.asp )
unbestreitbarrob