Gegeben sei der folgende HTML-Code:
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>Ich würde gerne #copyright auf dem Boden von #container . Kann ich dies erreichen, ohne die absolute Positionierung zu verwenden?
Wahrscheinlich nicht.
zuweisen position:relative a #container und dann position:absolute; bottom:0; a #copyright .
#container {
position: relative;
}
#copyright {
position: absolute;
bottom: 0;
}
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
Wenn position:relative auf Ihrem Container Ihr Design stört, denken Sie daran, dass Sie einfach ein Wrapper-Div innerhalb des Containers mit 100% Höhe einfügen können, und fügen Sie stattdessen position:relative zu diesem hinzu.
Und wenn es sich um sich wiederholende Elemente handelt, die sonst übereinander liegen würden?
Das ist nicht einmal annähernd so. Es positioniert am unteren Rand des sichtbaren Bildschirms auf den meisten aktuellen Browsern, aber ich weiß nicht von einem einzigen, wo das am unteren Rand des Container-Div positioniert wird.
Die von @User akzeptierte Antwort funktioniert nur, wenn das Fenster hoch und der Inhalt kurz ist. Wenn aber der Inhalt hoch und das Fenster kurz ist, wird die Copyright-Information über den Seiteninhalt gelegt, und wenn man dann nach unten scrollt, um den Inhalt zu sehen, wird ein schwebender Copyright-Hinweis angezeigt. Das macht diese Lösung für die meisten Seiten (wie z. B. diese Seite) unbrauchbar.
Die gebräuchlichste Methode dafür ist der gezeigte "CSS Sticky Footer"-Ansatz oder eine etwas schlankere Variante. Dieser Ansatz funktioniert hervorragend - WENN Sie eine Fußzeile mit fester Höhe haben.
Wenn Sie eine Fußzeile mit variabler Höhe benötigen, die am unteren Rand des Fensters erscheint, wenn der Inhalt zu kurz ist, und am unteren Rand des Inhalts, wenn das Fenster zu kurz ist, was tun Sie dann?
Schlucken Sie Ihren Stolz und benutzen Sie einen Tisch.
Zum Beispiel:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
#container {
height: 100%;
border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<body>
<table id="container">
<tr>
<td valign="top">
<div id="main">Lorem ipsum, etc.</div>
</td>
</tr>
<tr>
<td valign="bottom">
<div id="footer">Copyright some evil company...</div>
</td>
</tr>
</table>
</body>
</html>Probieren Sie es aus. Dies funktioniert für jede Fenstergröße, für jede Menge Inhalt, für jede Größe der Fußzeile, auf jedem Browser... sogar IE6.
Wenn Sie bei dem Gedanken, eine Tabelle für das Layout zu verwenden, zusammenzucken, sollten Sie sich einmal fragen, warum. CSS sollte unser Leben einfacher machen - und das hat es im Großen und Ganzen auch - aber Tatsache ist, dass es auch nach all den Jahren immer noch ein kaputtes, kontraintuitives Chaos ist. Es kann nicht jedes Problem lösen. Es ist unvollständig.
Tabellen sind nicht cool, aber zumindest im Moment sind sie manchmal der beste Weg, um ein Designproblem zu lösen.
Das scheint mir die beste Antwort zu sein. Darüber hinaus können Sie jederzeit "css-Tabellen" (display: table[-row/-cell]) anstelle von html-Tabellen verwenden. Das bietet das gleiche Layout ohne die Semantik.
Das padding:0; margin:0 muss eigentlich nur auf alle td- und tr-Elemente angewendet werden.
Wenn Sie ein PHP-Skript/ein anderes Skript haben, das Ihre Seite generiert, können Sie Ihre Fußzeile duplizieren, indem Sie eine als versteckten "Abstandshalter" und eine absolut positionierte verwenden. Der Abstandshalter in der Fußzeile stellt sicher, dass der Inhalt der Fußzeile die Seite nicht sprengt, egal wie groß er ist.
En unterstützte Browser können Sie Folgendes verwenden:
.parent {
display: flex;
flex-direction: column;
}
.child {
margin-top: auto;
}
.parent {
height: 100px;
border: 5px solid #000;
display: flex;
flex-direction: column;
}
.child {
height: 40px;
width: 100%;
background: #f00;
margin-top: auto;
}
<div class="parent">
<div class="child">Align to the bottom</div>
</div>Die obige Lösung ist wahrscheinlich flexibler, aber hier ist eine alternative Lösung:
.parent {
display: flex;
}
.child {
align-self: flex-end;
}
.parent {
height: 100px;
border: 5px solid #000;
display: flex;
}
.child {
height: 40px;
width: 100%;
background: #f00;
align-self: flex-end;
}
<div class="parent">
<div class="child">Align to the bottom</div>
</div>Nebenbei bemerkt, können Sie für zusätzliche Unterstützung Anbieterpräfixe hinzufügen.
Wie wäre es mit column-reverse auf dem Elternteil, so dass Sie dem Kind überhaupt nichts hinzufügen müssen?
Gibt es eine Möglichkeit, den untergeordneten Container zu überlagern? Für den Fall, dass Sie ein Suchergebnisfeld anzeigen möchten, das das Layout der Seite während des Suchvorgangs nicht verändern sollte.
IMO ist dies die beste Lösung. Absolute Positionierung fühlt sich hakelig an. Ich danke Ihnen!
Ja Sie können dies tun, ohne absolute Positionierung und ohne Verwendung von table s (die sich mit Markup und dergleichen herumschlagen).
DEMO
Diese Funktion wurde für IE>7, Chrome und FF getestet und lässt sich ganz einfach zu Ihrem bestehenden Layout hinzufügen.
<div id="container">
Some content you don't want affected by the "bottom floating" div
<div>supports not just text</div>
<div class="foot">
Some other content you want kept to the bottom
<div>this is in a div</div>
</div>
</div>
#container {
height:100%;
border-collapse:collapse;
display : table;
}
.foot {
display : table-row;
vertical-align : bottom;
height : 1px;
}Sie tut effektiv das, was float:bottom würde, selbst wenn man das in der Antwort von @Rick Reilly angesprochene Problem berücksichtigt!
Toll! Nur eine Anmerkung, IIRC Sie brauchen die <!DOCTYPE> gesetzt werden, damit dies im IE (<= 8 zumindest) funktioniert; die älteren Versionen unterstützen nur display:table-XXX im "Standard"-Modus. Aber der Standardmodus macht auch viele Seiten kaputt, die z. B. für IE6 entwickelt wurden.
Ich hatte mehr Glück mit .foot{display: table-footer-group} . Ich brauchte nicht vertical-align , height o border-collapse .
Da die Verwendung von CSS Grid zunimmt, möchte ich Folgendes vorschlagen align-self zu dem Element, das sich innerhalb eines Gittercontainers befindet.
align-self kann jeden der Werte enthalten: end , self-end , flex-end für das folgende Beispiel.
#parent {
display: grid;
}
#child1 {
align-self: end;
}
/* Extra Styling for Snippet */
#parent {
height: 150px;
background: #5548B0;
color: #fff;
padding: 10px;
font-family: sans-serif;
}
#child1 {
height: 50px;
width: 50px;
background: #6A67CE;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
<div id="parent">
<!-- Other elements here -->
<div id="child1">
1
</div>
</div> CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
236 Stimmen
Diese Situation ist einer der Gründe, warum Layout-Tabellen noch nicht verschwunden sind. Dies mit einer Tabelle zu tun, ist kinderleicht und funktioniert überall. Mit CSS ist das wahnsinnig schwierig, und die Unterstützung für verschiedene Browser ist so gut wie nicht vorhanden. Ganz zu schweigen davon, dass es unmöglich ist, sich zu merken, wie man es richtig macht.
1 Stimmen
Ich verstehe die Frage nicht. Warum müssen Sie überhaupt eine absolute Positionierung verwenden? Hat der Container eine bestimmte Höhe, unabhängig vom Inhalt, den er enthält?