Mischa Moroschko
Ich möchte am Ende der Seite eine Zeile “Alle Rechte vorbehalten…” einfügen. Ich habe versucht, die absolute Positionierung zu verwenden, aber dies funktioniert nicht wie erwartet, wenn die Größe des Fensters auf eine kleinere Höhe geändert wird.
Wie kann ich dieses einfache Ziel erreichen?
Möglicherweise möchten Sie das absolut ausgerichtete div in einen relativ ausgerichteten Container einfügen – auf diese Weise wird es immer noch im Container und nicht im Browserfenster enthalten sein.
<div style="position: relative;background-color: blue; width: 600px; height: 800px;">
<div style="position: absolute; bottom: 5px; background-color: green">
TEST (C) 2010
</div>
</div>
Versuchen:
.bottom {
position: fixed;
bottom: 0;
}
Thorin Eichenschild
Versuche dies
<head>
<style type ="text/css" >
.footer{
position: fixed;
text-align: center;
bottom: 0px;
width: 100%;
}
</style>
</head>
<body>
<div class="footer">All Rights Reserved</div>
</body>
Ich habe es bearbeitet, damit es funktioniert, wobei ich die Idee, es in der Mitte zu machen, beibehalten habe, da ich es auch brauchte. Hoffe, dass andere Leute es auch nützlich finden werden.
– Vitali Pom
15. Mai 2015 um 21:10 Uhr
Px ist nicht notwendig, wenn es gleich 0 ist, warum zusätzliche Bytes hinzufügen, wenn Sie es nicht brauchen? 🙂
– Riley Jones
1. Januar um 22:56 Uhr
Aus meiner Recherche und ausgehend von diesem Beitrag denke ich, dass dies die beste Option ist:
<p style=" position: absolute; bottom: 0; left: 0; width: 100%; text-align: center;">This will stick at the botton no matter what :).</p> Diese Option ermöglicht Größenänderungen der Seite und selbst wenn die Seite leer ist, bleibt sie am unteren Rand hängen.
So habe ich es gemacht.
#copyright {
float: left;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
bottom: 0px;
width: 100%;
} <div id="copyright">
Copyright 2018 © Steven Clough
</div>Wenn ich auf “Code-Snippet ausführen” klicke, wird dies oben auf der Seite angezeigt, nicht unten!
– Umgekehrter Ingenieur
18. März 2021 um 8:27 Uhr
marc_s
Ein alter Thread, aber … Die Antwort von Konerak funktioniert, aber warum sollten Sie überhaupt die Größe eines Containers standardmäßig festlegen? Was ich bevorzuge, ist, Code überall dort zu verwenden, wo es um große Seitengrößen geht. Also das ist mein Code:
<style>
#container {
position: relative;
height: 100%;
}
#footer {
position: absolute;
bottom: 0;
}
</style>
</HEAD>
<BODY>
<div id="container">
<h1>Some heading</h1>
<p>Some text you have</p>
<br>
<br>
<div id="footer"><p>Rights reserved</p></div>
</div>
</BODY>
</HTML>
Der Trick ist drin <br> wo Sie neue Linie brechen. Wenn die Seite also klein ist, sehen Sie unten auf der Seite eine Fußzeile, wie Sie möchten.
ABER, wenn eine Seite so groß ist, DASS SIE SIE NACH UNTEN SCROLLEN MÜSSEN, dann wird Ihre Fußzeile 2 neue Zeilen unter dem gesamten obigen Inhalt sein. Und wenn Sie dann die Seite vergrößern, wird Ihre Fußzeile immer nach UNTEN gehen. Ich hoffe, jemand findet das nützlich.
Wenn ich auf “Code-Snippet ausführen” klicke, wird dies oben auf der Seite angezeigt, nicht unten!
– Umgekehrter Ingenieur
18. März 2021 um 8:27 Uhr
Was genau “funktioniert nicht wie erwartet”?
– RoToRa
11. Mai 2010 um 11:33 Uhr
Irgendein Codebeispiel, mit dem wir arbeiten können?
– Flatlin3
11. Mai 2010 um 11:34 Uhr
Was meinst du mit “Ende der Seite”? Dazu würden Sie es einfach am Ende des HTML-Codes hinzufügen. Aber es scheint, dass Sie möchten, dass es am unteren Rand des platziert wird Fenster eher als die Seite. (Wenn die Seite gescrollt oder die Fenstergröße geändert wird, sollte es immer am unteren Fensterrand bleiben. (Ist das so gewollt?)
– Chiccodoro
11. Mai 2010 um 11:36 Uhr
Ich denke, Sie sind nach der Antwort auf diese Frage. Das Fußzeilen-Div befindet sich unter allen anderen Divs, auch wenn Sie die Größe Ihres Browserfensters ändern. stackoverflow.com/questions/2351674/…
– Patrick
11. Mai 2010 um 12:47 Uhr