2010-05-11 31 views
11

Me gustaría poner una línea "Todos los derechos reservados ..." en la parte inferior de la página. Traté de usar la posición absoluta, pero esto no funciona como se esperaba cuando la ventana cambió de tamaño a una altura menor.Cómo pegar texto en la parte inferior de la página?

¿Cómo puedo lograr este objetivo simple?

+0

¿Qué es exactamente "no funciona como se espera"? – RoToRa

+0

¿Hay algún código con el que podamos trabajar? – Flatlin3

+0

¿Qué quiere decir con "parte inferior de la página"? Para eso, simplemente lo agrega al final del código HTML. Pero parece que desea que se coloque en la parte inferior de la * ventana * en lugar de en la página. (Si la página se desplaza o se cambia el tamaño de la ventana, siempre debe atenerse a la frontera inferior de la ventana. (Es eso lo que quiere?) – chiccodoro

Respuesta

16

Es posible que desee poner el div absolutamente alineado en un recipiente relativamente alineadas - de esta manera será aún estar contenida en el recipiente en lugar de la ventana del navegador.

<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

Hay un excelente pie de página adhesivo en ryanfait.com que he usado, y this one parece prometedor también.

14

Probar:

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

probar este

<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

que lo editó hacer que funcione, manteniendo la idea de lo que es en el centro, ya que también lo necesitaba. Esperamos que otras personas lo encuentren útil también. –

+0

me salvaste la vez, muchas gracias. –

0

Un hilo viejo, pero ... Respuesta de Konerak funciona, pero ¿por qué incluso ajustar el tamaño de un contenedor por defecto. Lo que prefiero es usar el código donde sea que sea, sin importar el tamaño de la página. Por lo que este mi código:

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

El truco está en <br>, donde se rompe la nueva línea. Entonces, cuando la página es pequeña, verá el pie de página en la parte inferior de la página, como quiera.

PERO, cuando una página es grande como para que se debe desplazar hacia abajo, a continuación, el pie de página va a ser de 2 nuevas líneas debajo de todo el contenido de arriba. Y si lo haces, la página se agrandará, tu pie de página siempre irá hacia ABAJO. Espero que alguien lo encuentre útil.

Cuestiones relacionadas