Wie klebt man Text am Ende der Seite?

Lesezeit: 3 Minuten

Benutzeravatar von Misha Moroshko
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?

  • 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

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;
}

Benutzeravatar von Thorin Eichenschild
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 &copy; 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

Benutzeravatar von marc_s
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

1436980cookie-checkWie klebt man Text am Ende der Seite?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy