741

Angesichts des folgenden HTML:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Ich würde gerne #copyrightam Boden bleiben #container.

Kann ich dies ohne absolute Positionierung erreichen? Wenn die Eigenschaft float den Wert 'bottom' unterstützt, scheint dies den Trick zu tun, aber leider nicht.

html css Dónal
quelle

211

Diese Situation ist einer der Gründe, warum Layouttabellen noch nicht verschwunden sind. Dies mit einem Tisch zu tun ist kinderleicht und funktioniert überall. Dies in CSS zu tun ist unglaublich schwierig und die browserübergreifende Unterstützung ist mittelmäßig. Geschweige denn, dass es unmöglich ist, sich daran zu erinnern, wie man es richtig macht.

Tomalak

Ich verstehe die Frage nicht. Warum müssen Sie überhaupt die absolute Positionierung verwenden? Hat der Container eine festgelegte Höhe, unabhängig vom Inhalt?

HartleySan

924

Wahrscheinlich nicht.

Zuweisen position:relativezu #containerund dann position:absolute; bottom:0;zu #copyright.

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Erweitern Sie das Snippet

Benutzer
quelle

10

Wenn position: relative auf Ihrem Container Ihr Design beschädigt, denken Sie daran, dass Sie einfach ein Wrapper div mit 100% Höhe in den Container einfügen und stattdessen position: relativ dazu hinzufügen können.

Jack Shepherd

und wenn es sich um sich wiederholende Elemente handelt, welche würden sonst übereinander positioniert?

CRice

6

Ein absolut positioniertes Element sucht nach seinem nächsten übergeordneten Element, das absolut oder relativ positioniert ist, um seine Position zu bestimmen. Wenn alles fehlschlägt, wird auf body (Fenster) zurückgegriffen. Daher muss der Elternteil relativ sein.

user17753

1

Fügen Sie #container einen unteren Rand hinzu, um das Urheberrecht am Seiteninhalt zu verhindern

Doc Kodam

1

Der unten stehende Flexbox-Ansatz ist viel besser.

woohoo

345

Tatsächlich funktioniert die von @User akzeptierte Antwort nur, wenn das Fenster groß und der Inhalt kurz ist. Wenn der Inhalt jedoch groß und das Fenster kurz ist, werden die Copyright-Informationen über den Seiteninhalt gelegt. Wenn Sie dann nach unten scrollen, um den Inhalt anzuzeigen, erhalten Sie einen schwebenden Copyright-Hinweis. Das macht diese Lösung für die meisten Seiten unbrauchbar (wie diese Seite eigentlich).

Die gebräuchlichste Methode hierfür ist der demonstrierte Ansatz "CSS Sticky Footer" oder eine etwas schlankere Variante. Dieser Ansatz funktioniert hervorragend - WENN Sie eine Fußzeile mit fester Höhe haben.

Was tun Sie, wenn Sie eine Fußzeile mit variabler Höhe benötigen, die am unteren Rand des Fensters angezeigt wird, wenn der Inhalt zu kurz ist, und am unteren Rand des Inhalts, wenn das Fenster zu kurz ist?

Schluck deinen Stolz und benutze 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>

Erweitern Sie das Snippet

Versuch es. Dies funktioniert für jede Fenstergröße, für jede Menge an Inhalten, für jede Fußzeile, in jedem Browser ... sogar für IE6.

Nehmen Sie sich eine Sekunde Zeit, um sich zu fragen, warum. CSS sollte unser Leben leichter machen - und das hat es insgesamt getan -, aber Tatsache ist, dass es auch nach all den Jahren immer noch ein kaputtes, kontraintuitives Durcheinander ist. Es kann nicht jedes Problem lösen. Es ist unvollständig.

Tabellen sind nicht cool, aber zumindest für den Moment sind sie manchmal der beste Weg, um ein Designproblem zu lösen.

Rick Reilly
quelle

80

Scheint mir die beste Antwort zu sein. Außerdem können Sie anstelle von HTML-Tabellen immer "CSS-Tabellen" (Anzeige: Tabelle [-row / -cell]) verwenden. Das ergibt das gleiche Layout ohne die Semantik.

Chiccodoro

1

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. Die Spacer-Fußzeile stellt sicher, dass unabhängig davon, wie viel Inhalt Sie in Ihrer Fußzeile haben, die Seite nicht aufgerufen wird.

Tyzoid

20

Für andere, die diese Kommentare lesen: Dies hat nichts mit "Stolz" oder "cool" zu tun. Die Verwendung von Tabellen für das Layout ist pragmatisch noch schmerzhafter, insbesondere bei großen Mengen an Inhalten. Stellen Sie sicher, dass Sie kein td verpassen und so viel irrelevantes Markup durchsehen, wenn Sie Inhalte hinzufügen. Es ist eine schmerzhafte Ursache, dass wir HTML- Dokumente erstellen, nicht nur Layouts. Wenn der größte Teil des Inhalts unseres Dokuments keine tabellarischen Daten sind, warum fügen wir sie dann in Tabellen ein? Wenn wir Webtechnologien nicht so verwenden möchten, wie sie gemeint waren, warum sollten wir sie dann verwenden? Verwenden Sie stattdessen Desktop- / Mobile-Apps, um Inhalte zu veröffentlichen

gabe

1

@chiccodoro Ich habe ein tabellenloses Äquivalent implementiert, das überraschend minimal ist. Überprüfen Sie meine Antwort unten

Hashbrown

59

Stolz ist irrelevant. Tabellen sollten aus Gründen der Barrierefreiheit nicht für das Layout verwendet werden. Wenn Sie jemals einen Bildschirmleser verwendet haben, wissen Sie, warum Tabellen nur für tabellarische Daten verwendet werden sollten. Verwenden Sie CSS-Tabellen als @ chiccodoro-Zustände.

Matt Fellows

171

Der Flexbox-Ansatz!

In unterstützten Browsern können Sie Folgendes verwenden:

Beispiel hier

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Die obige Lösung ist wahrscheinlich flexibler, hier ist jedoch eine alternative Lösung:

Beispiel hier

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Als Randnotiz möchten Sie möglicherweise Herstellerpräfixe für zusätzliche Unterstützung hinzufügen.

Josh Crozier
quelle

3

Wie wäre es mit einem column-reverseElternteil, sodass Sie dem Kind überhaupt nichts hinzufügen müssen?

Max Waterman

1

Dies sollte wahrscheinlich die akzeptierte Antwort sein - keine Hacks, keine absolute Positionierung, Überlauf funktioniert bei Bedarf sauber (es war für mich).

Adverbly

114

Ja, Sie können dies ohne absolutePositionierung und ohne Verwendung von tables (die mit Markup und dergleichen schrauben) tun .

DEMO
Dies wurde getestet, um mit IE> 7, Chrome, FF & zu arbeiten. Es ist wirklich einfach, es zu Ihrem vorhandenen Layout hinzuzufü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;
}

Es macht effektiv das, was float:bottomes tun würde, selbst wenn es das Problem berücksichtigt, auf das in der Antwort von @Rick Reilly hingewiesen wurde!

Hashbrown
quelle

1

Nett! Nur eine Anmerkung, IIRC, Sie benötigen das <!DOCTYPE>Set, damit dies im IE funktioniert (mindestens <= 8). Diese älteren Versionen unterstützen nur den display:table-XXX"Standard" -Modus. Der Standardmodus wird jedoch auch viele Seiten beschädigen, die beispielsweise für IE6 entwickelt wurden.

David

3

Sie können auch flexbox - stackoverflow.com/questions/526035/…

Josh Crozier

2

Ich fand mehr Glück mit .foot{display: table-footer-group}. Ich habe nicht brauchen vertical-align, heightoder border-collapse.

Jacob Valenta

Würde dies funktionieren, wenn #containernur enthalten #footund kein anderer Inhalt?

Trost

es scheint, dass es zumindest einen nicht unterbrechenden Raum brauchen würde , @Solace

Hashbrown

20

Es ist eine alte Frage, aber dies ist ein einzigartiger Ansatz, der in mehreren Fällen helfen kann.

Reines CSS, ohne absolute Positionierung, ohne Höhenkorrektur, Cross-Browser (IE9 +)

Schauen Sie sich diese Working Fiddle an

Da der normale Fluss von oben nach unten ist, können wir den #copyrightDiv nicht einfach bitten , sich an den Boden seines Elternteils zu halten, ohne sich absolut zu positionieren. Aber wenn wir das wollten#copyright Div sich an den oberen seines Elternteils hält, dann wird sehr einfach sein - weil dies der normale Fließweg ist.

Wir werden dies also zu unserem Vorteil nutzen. Wir werden die Reihenfolge der divs im HTML ändern , jetzt die#copyright div oben und der Inhalt folgt ihm sofort. Wir lassen den Inhalt auch vollständig dehnen (unter Verwendung von Pseudoelementen und Löschtechniken).

Jetzt geht es nur noch darum, diese Reihenfolge wieder in die Ansicht umzukehren. Dies ist mit der CSS-Transformation problemlos möglich.

Wir drehen den Container um 180 Grad und jetzt: hoch-runter. (und wir kehren den Inhalt um, um wieder normal auszusehen)

Wenn wir eine Scroolbar im Inhaltsbereich haben möchten, müssen wir etwas mehr CSS-Magie anwenden. gezeigt wird wie hier [in diesem Beispiel ist der Inhalt unter einem Header - aber es ist die gleiche Idee]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>

Erweitern Sie das Snippet

avrahamcool
quelle

2

Bitte nein, schauen Sie, wie schrecklich das Rendering jetzt ist i.stack.imgur.com/ZP9Hw.png

grg

7

Erstellen Sie einen weiteren Container divfür die obigen Elemente #copyright. Fügen Sie direkt über dem Copyright ein neues hinzu div: <div style="clear:both;"></div>Dadurch wird die Fußzeile gezwungen , sich unter allem anderen zu befinden, genau wie bei der Verwendung der relativen Positionierung ( bottom:0px;).

Rápli András
quelle

7

Versuche dies;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

Gary Green
quelle

1

@Feelsbadman Bitte ändern Sie den Code anderer Leute in solchen Antworten nicht. Wenn Sie beabsichtigten, nur das CSS vom HTML-Code zu trennen, beachten Sie bitte, dass Sie den Code versehentlich in etwas anderes geändert haben, wodurch möglicherweise die Antwort ungültig wurde und die Absicht des Posters sicherlich geändert wurde.

TylerH

6

Während keine der hier gegebenen Antworten in meinem speziellen Fall zutraf oder zu funktionieren schien, stieß ich auf diesen Artikel, der diese nette Lösung bietet:

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

Ich finde es sehr nützlich, um Responsive Design für mobile Anzeigen anzuwenden, ohne den gesamten HTML-Code einer Website neu einstellen zu müssen body selbst als Tabelle festzulegen.

Beachten Sie, dass nur das erste table-footer-groupoder table-header-groupals solches gerendert wird: Wenn es mehr als eines gibt, werden die anderen als gerendert table-row-group.

Skippy le Grand Gourou
quelle

6

CSS-Raster

Da die Verwendung von CSS Grid zunimmt, möchte ich align-selfdem Element vorschlagen , das sich in einem Grid-Container befindet.

align-selfenthalten , können beliebige Werte: end, self-end, flex-endfü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>

Erweitern Sie das Snippet

Manoj Kumar
quelle

5

Sie können aligndas Feld in der Tat bottomohne verwenden, position:absolutewenn Sie heightdie #containerVerwendung der Textausrichtungsfunktion von kenneninline-block Elementen kennen.

Hier können Sie es in Aktion sehen.

Dies ist der Code:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

jacmkno
quelle

5

Verwenden der Eigenschaft translateY und top

Setzen Sie das untergeordnete Element einfach auf Position: relativ und verschieben Sie es dann nach oben: 100% (das ist die 100% -Höhe des übergeordneten Elements) und bleiben Sie durch Transformation am unteren Ende des übergeordneten Elements: translateY (-100%) (das ist -100% der Höhe von das Kind).

Leistungen

Sie nicht nehmen das Element aus der Seite fließen
es ist dynamisch

Aber immer noch nur Workaround :(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

Vergessen Sie nicht die Präfixe für den älteren Browser.

Samuell
quelle

4

CodePen Link hier .

html, body {
    width: 100%;
    height: 100%;
}

.overlay {
    min-height: 100%;
    position: relative;
}

.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}

.height {
    width: 900px;
    height: 50px;
}

.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}

<div class="overlay">
    <div class="container">
        <div class="height">
            content
        </div>
    </div>

    <div class="footer">
        footer
    </div>
</div>

Erweitern Sie das Snippet

Azizarslan
quelle

3

Wenn Sie möchten, dass es unabhängig von der Höhe des Behälters am Boden "haftet", ist die absolute Positionierung der richtige Weg. Wenn das Copyright-Element das letzte im Container ist, befindet es sich natürlich immer ganz unten.

Können Sie Ihre Frage erweitern? Erklären Sie genau, was Sie versuchen (und warum Sie keine absolute Positionierung verwenden möchten)?

Jack Sleight
quelle

2

Wenn es Bestimmungen für die Verwendung von position:absolute;oder gibt position:relative;, können Sie auch versuchen, padding Eltern div oder a zu setzen margin-top:x;. In den meisten Fällen keine sehr gute Methode, in einigen Fällen kann sie jedoch nützlich sein.

Ghost Echo
quelle

1

Vielleicht hilft das jemandem: Sie können das Div immer außerhalb des anderen Div platzieren und es dann mit negativem Rand nach oben schieben:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

DesignConsult
quelle

1

 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Erweitern Sie das Snippet

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Erweitern Sie das Snippet

Anmol Ratan Mohla
quelle

1

Ich möchte nicht "position: absolute" für eine klebrige Fußzeile unten verwenden. Dann können Sie so vorgehen:

 html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }

<html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>

Erweitern Sie das Snippet

Nilesh Pawar
quelle

Hi nilesh; Diese Lösung wird bereits in mehreren Antworten bereitgestellt. Bitte lesen Sie unbedingt alle vorhandenen Antworten auf eine Frage, bevor Sie eine neue Frage stellen, um sicherzustellen, dass keine doppelten Inhalte vorhanden sind!

TylerH

1

Wenn Sie die Höhe des untergeordneten Blocks nicht kennen:

#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}

<div id="parent">
    <div class="child">child
    </div> 
</div>

Erweitern Sie das Snippet

http://jsbin.com/ULUXIFon/3/edit

Wenn Sie die Höhe des untergeordneten Blocks kennen, fügen Sie den untergeordneten Block hinzu, und fügen Sie dann padding-top / margin-top hinzu:

#parent {
    background:green;
    width:200px;
    height:130px;
    padding-top:70px;
}
.child {
    background:red;
    vertical-align:
    bottom;
    height:130px;
}

<div id="parent">
    <div class="child">child
    </div> 
</div>

Erweitern Sie das Snippet

zloctb
quelle

0

Nur weil dies überhaupt nicht erwähnt wurde, funktioniert das normalerweise in Situationen wie Ihrer gut:

Platzieren des Copyright-Div nach dem Container-Div

Sie müssten das copyright-div nur ähnlich wie den anderen Container formatieren (gleiche Gesamtbreite, Zentrierung usw.), und alles ist in Ordnung.

CSS:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

Dies ist möglicherweise nur dann nicht ideal, wenn Ihr Container-Div mit deklariert height:100%ist und der Benutzer nach unten scrollen muss, um das Copyright anzuzeigen. Aber auch noch könnten Sie margin-top:-20pxherumarbeiten (z. B. wenn die Höhe Ihres Copyright-Elements 20px beträgt).

Keine absolute Positionierung
Kein Tabellenlayout
Kein verrücktes CSS, das sieht in jedem anderen Browser anders aus (zumindest IE, wissen Sie)
Einfache und übersichtliche Formatierung

Nebenbei: Ich weiß, dass das OP nach einer Lösung gefragt hat, die "... am Boden des 'Container'-Bereichs haftet ..." und nicht darunter, aber komm schon, die Leute suchen hier nach guten Lösungen, und das hier ist ein!

Levit
quelle

Im Fall von OP ist diese Lösung nur dann gut, wenn #copyright eine feste Höhe hat (dann könnten Sie einstellen margin-top: -{element height}.

Gajus

@ Gajus: Dies ist keine absolute oder feste Positionierung. Dies macht genau das, was das OP will (unabhängig von der Copyright-Höhe), mit der einzigen Ausnahme, dass sich das Copyright-Div nicht im ersten Container befindet. Das OP bat um das Urheberrecht, am unteren Rand des Containers zu bleiben, nicht auf der Seite !!

Levite

Entschuldigung, ich meine nicht, wenn der Container des # Containers eine feste Höhe hat.

Gajus

Wenn ich mich nicht irre, ist das eigentliche Problem, das OP zu lösen versucht, das Ende des Elements, wenn die Elementhöhe von einem anderen Element vorgegeben wird, z . B. mit Kommentaren jsbin.com/acoVevI/3 . Hier können Sie den Knopf nicht einfach außerhalb des Containers platzieren . Weitere Informationen zum Problem finden Sie unter jsbin.com/acoVevI/4 .

Gajus

Das OP sagte: "Ich möchte, dass #copyright am Ende von #container bleibt.", Daher ist dies aus der Frage nicht ganz klar. Darüber hinaus ist dies ein gültiges Beispiel für jeden Fall, in dem es einfach "am Ende von #container bleiben" sollte. Diese Lösung sollte hilfreich sein, einen sauberen Ansatz haben und für viele Layouts gut funktionieren. ZB jede Seite mit scrollendem Inhalt, wie stackoverflow.com ;-)

Levite

0

Hier ist ein Ansatz, der darauf abzielt, ein Element mit einer bekannten Höhe und Breite (zumindest ungefähr) nach rechts schweben zu lassen und unten zu bleiben, während es sich für die anderen Elemente als Inline-Element verhält. Es ist unten rechts fokussiert, da Sie es mit anderen Methoden problemlos in jeder anderen Ecke platzieren können.

Ich musste eine Navigationsleiste erstellen, die die tatsächlichen Links unten rechts und zufällige Geschwisterelemente enthält, und gleichzeitig sicherstellen, dass sich die Leiste selbst richtig dehnt, ohne das Layout zu stören. Ich habe ein "Schatten" -Element verwendet, um den Linkbereich der Navigationsleiste zu belegen, und es am Ende der untergeordneten Knoten des Containers hinzugefügt.

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>

Zyox
quelle

0

float:bottomIn CSS wird nichts aufgerufen . Der beste Weg ist die Positionierung in solchen Fällen:

position:absolute;
bottom:0;

Touhid Rahman
quelle

Bitte erläutern Sie Ihre Antwort.

Mohit Raj Purohit

0

Für diejenigen, die nur ein Kind im Container haben, können Sie das table-cellund verwendenvertical-align Ansatz , der zuverlässig funktioniert hat, um ein einzelnes Div am unteren Rand des übergeordneten Elements zu positionieren.

Beachten Sie, dass die Verwendung table-footer-groupals andere Antworten die Höhenberechnung des übergeordneten Elements unterbricht table.

#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}

<div id="container">
    <div id="item">Single bottom item</div>
</div>

Erweitern Sie das Snippet

Hai Zhang
quelle

0

Laut: w3schools.com

Ein Element mit Position: absolut; wird relativ zum nächstgelegenen positionierten Vorfahren positioniert (anstatt wie fest relativ zum Ansichtsfenster positioniert).

Sie müssen also das übergeordnete Element mit etwas entweder Relativem oder Absolutem usw. positionieren und das gewünschte Element auf Absolut positionieren und letzteres auf 0 setzen.

Jonas Freire
quelle

Dies wird bereits in der akzeptierten Antwort (unter anderem) erwähnt.

TylerH

-1

Div of Style, position:absolute;bottom:5px;width:100%;funktioniert, aber es erforderte mehr Bildlaufsituation.

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}

nicejay
quelle

Wie kann ich mein Div am Boden des Containers positionieren?

Antworten:

Der Flexbox-Ansatz!

Reines CSS, ohne absolute Positionierung, ohne Höhenkorrektur, Cross-Browser (IE9 +)

CSS-Raster

Verwenden der Eigenschaft translateY und top