2010-05-11 11 views
11

Ich möchte eine Zeile "Alle Rechte vorbehalten ..." am Ende der Seite setzen. Ich habe versucht, absolute Positionierung zu verwenden, aber dies funktioniert nicht wie erwartet, wenn das Fenster auf kleinere Höhe verkleinert wurde.Wie man Text an den unteren Rand der Seite kleben?

Wie kann ich dieses einfache Ziel erreichen?

+0

Was genau "funktioniert nicht wie erwartet"? – RoToRa

+0

Irgendein Codeexemplar, mit dem wir arbeiten können? – Flatlin3

+0

Was meinst du mit "unten auf der Seite"? Dafür würden Sie es einfach am Ende des HTML-Codes hinzufügen. Aber es scheint, dass Sie möchten, dass es am Ende des * Fensters * und nicht auf der Seite platziert wird. (Wenn die Seite gescrollt wird oder das Fenster in der Größe geändert wird, sollte es immer am unteren Fensterrand bleiben. (Ist das, was Sie wollen?) – chiccodoro

Antwort

16

Sie könnten die absolut ausgerichtet div in einem relativ ausgerichteten Behälter setzen wollen - auf diese Weise wird es noch in den Behälter enthalten sein, anstatt das Browserfenster.

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

Es gibt eine ausgezeichnete klebrige Fußzeile auf ryanfait.com, die ich verwendet habe, und this one sieht auch vielversprechend aus.

14

Versuchen:

.bottom { 
    position: fixed; 
    bottom: 0; 
} 
6

Versuchen Sie, diesen

<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> 
+0

Ich habe es bearbeitet, um es funktionieren zu lassen, behalte die Idee, es in die Mitte zu stellen, da ich es auch brauchte Hoffe andere Leute werden es auch nützlich finden –

+0

Du hast meine Zeit gerettet, vielen Dank. –

0

Einen alten Thread, aber ... Antwort von Konerak funktioniert, aber warum sollte man auch Größe eines Containers voreingestellt. Was ich bevorzuge, ist es, Code überall dort zu verwenden, wo es keine große Seitengröße gibt. 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, in <br>, wo Sie neue Linie brechen. Wenn die Seite klein ist, wird die Fußzeile am Ende der Seite angezeigt.

ABER, wenn eine Seite groß ist, SO DASS DU sie SCROLLEN MUSST, dann wird dein Footer 2 neue Zeilen unter dem ganzen Inhalt oben sein. Und wenn Sie dann die Seite vergrößern, wird Ihre Fußzeile immer nach UNTEN gehen. Ich hoffe, dass jemand das nützlich finden wird.

Verwandte Themen