¿Cómo pegar texto en la parte inferior de la página?

4 minutos de lectura

Avatar de usuario de Misha Moroshko
Misha Moroshko

Me gustaría poner una línea “Todos los derechos reservados…” en la parte inferior de la página. Traté de usar el posicionamiento absoluto, pero esto no funciona como se esperaba cuando la ventana cambió de tamaño a una altura más pequeña.

¿Cómo puedo lograr este simple objetivo?

  • ¿Qué es exactamente “no funciona como se esperaba”?

    – RoToRa

    11 de mayo de 2010 a las 11:33

  • ¿Algún ejemplo de código con el que podamos trabajar?

    – Flatlin3

    11 de mayo de 2010 a las 11:34

  • ¿Qué quieres decir con “parte inferior de la página”? Para eso, simplemente lo agregaría en la parte inferior del código HTML. Pero parece que quieres que se coloque en la parte inferior de la ventana en lugar de la página. (si se desplaza la página o se cambia el tamaño de la ventana, siempre debe adherirse al borde inferior de la ventana. (¿Es eso lo que quiere?)

    – chiccodoro

    11 de mayo de 2010 a las 11:36

  • Creo que buscas la respuesta en esta. El div de pie de página estará debajo de todos los demás divs incluso cuando cambie el tamaño de la ventana del navegador. stackoverflow.com/questions/2351674/…

    – Patricio

    11 de mayo de 2010 a las 12:47

Es posible que desee colocar el div absolutamente alineado en un contenedor relativamente alineado; de esta manera, seguirá contenido en el contenedor en lugar de en 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>

Probar:

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

Avatar de usuario de Thorin Oakenshield
Escudo de roble de Thorin

Prueba esto

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

  • Lo edité para que funcionara, manteniendo la idea de hacerlo en el centro, ya que yo también lo necesitaba. Espero que otras personas también lo encuentren útil.

    – Vitali Pom

    15 mayo 2015 a las 21:10


  • Px no es necesario si es igual a 0, ¿por qué agregar bytes adicionales cuando no es necesario? 🙂

    –Riley Jones

    1 ene a las 22:56


A partir de mi investigación y a partir de este post, creo que esta es la mejor opción:

<p style=" position: absolute; bottom: 0; left: 0; width: 100%; text-align: center;">This will stick at the botton no matter what :).</p>	

Esta opción permite cambiar el tamaño de la página e incluso si la página está en blanco, se mantendrá en la parte inferior.

Así es como lo he hecho.

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

  • Si hago clic en “Ejecutar fragmento de código”, esto se muestra en la parte superior de la página, ¡no en la parte inferior!

    – Ingeniero invertido

    18 de marzo de 2021 a las 8:27

avatar de usuario de marc_s
marc_s

Un hilo antiguo, pero… La respuesta de Konerak funciona, pero ¿por qué establecerías el tamaño de un contenedor de forma predeterminada? Lo que prefiero es usar código donde sea que sea grande el tamaño de la página. Así que este es 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 esta en <br> donde rompes una 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 desee.

PERO, cuando una página es grande PARA QUE DEBES DESPLAZARLA HACIA ABAJO, entonces tu pie de página tendrá 2 nuevas líneas debajo de todo el contenido anterior. Y si luego agrandará la página, su pie de página siempre irá hacia ABAJO. Espero que alguien encuentre esto útil.

  • Si hago clic en “Ejecutar fragmento de código”, esto se muestra en la parte superior de la página, ¡no en la parte inferior!

    – Ingeniero invertido

    18 de marzo de 2021 a las 8:27

¿Ha sido útil esta solución?