DIV siempre en la parte inferior

MikiBroki · #1 (**permalink**) 02/02/2007, 03:11

Hola buenas,

He estado mirando cómo hacerlo con CSS pero no veo el modo (sólo he conseguido que funcione en FF, IE como siempre va a lo suyo). Lo que necesito es tener un div siempre en la parte inferior, como el de esta página:

http://www.psicofxp.com/forums/desar...-pregunta.html

Gracias

MikiBroki · #2 (**permalink**) 03/02/2007, 15:31

Bueno por si a alguien ayuda he dado con la solución (con javaScript para que que funcione en IE también). Se me ocurrió usar la función "setInterval" y el resultado es bastante bueno.

Código:

<html>


	<head>
		<script language="javaScript">
			
			window.onload = function() {
				setInterval( posicionar, 500 );
			}

			//--------------------------------

			function posicionar() {
				document.getElementById('midiv').style.top  = document.body.clientHeight +
															  document.body.scrollTop    -				
															  document.getElementById("midiv").style.height.replace("px", "") - 
															  20;
				document.getElementById('midiv').style.left = document.body.clientWidth - 55;
			}

		</script>
	</head>




	<body>

    	hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>
		hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>
		hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>
		hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>hola<br/>


		<div id="midiv" style="
							   position:absolute;
							   top:10;		
							   height:50px;
							   background-color:red;
							  ">

			HOLA<p/>

			<input id="boton" type="button" onclick="
									  				 alert( 'offsetTop -> ' + document.getElementById('midiv').offsetTop );
													" value="click" />

		</div>

	<body>

</html>

despistao · #3 (**permalink**) 30/07/2008, 20:32

muy bien MikiBroki

sólo te falta posicionarlo a la derecha bajo cualquier resolución:

Código:

document.getElementById('popup').style.left = document.body.clientWidth - document.body.scrollLeft - 250;

restándole 250 me queda perfecto, varía según el tamaño de la capa...

un saludo

PD:ahora os dejo un código que encontré muy bueno, para hacer el popup flotante con div :P

despistao · #4 (**permalink**) 30/07/2008, 20:58

Buenas

Antes de nada quiero decir que el código que posiciona la capa lo he extraído del código fuente de www.sabiosdelpc.net . Yo he modificado una línea para posicionarlo a la derecha bajo cualquier resolución.
No sé si los administradores de este sitio permiten poner código obtenido de esta forma. En caso de que no permitan, por favor, contacten conmigo y edito el post o lo borro, o lo borran ustedes directamente.

Código para hacer un pop-up flotante con <div>

Os dejo el código en un ejemplo de pagina html:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
<!--
window.onload = function() {
posicionar();
}
window.onresize= function() {
posicionar();
}
<!--Código original de http://www.sabiosdelpc.net/ -->		
function iecompattest(){
return (document.compatMode && document.compatMode!='BackCompat')? document.documentElement : document.body
}	
function posicionar(){
<!-- sólo modifiqué el valor de startX en la línea siguiente -->
var startX = document.body.clientWidth - document.body.scrollLeft - 250; // Tamaño horizontal de la barra en pixeles
var startY = 30; // Tamaño vertical de la barra en pixeles   /*arriba: document.body.clientHeight - 140;*/
var verticalpos='frombottom' // 'fromtop' o 'frombottom' para definir si va arriba o abajo.
barheight=document.getElementById('popup').offsetHeight
var ns = (navigator.appName.indexOf('Netscape') != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
el.style.visibility='visible'
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+'px';this.style.top=y+'px';};
el.x = startX;
if (verticalpos=='fromtop')
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=='fromtop'){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout('stayTopLeft()', 10);
}
ftlObj = ml('popup');
stayTopLeft();
}	
<!--FIN http://www.sabiosdelpc.net/ -->	
function cerrarPopup(pid)
   {
      document.getElementById(pid).style.visibility = 'hidden';      
   }
   -->
</script>
<style>
#popup
   {
      position: absolute;
      border: 1px solid #666666;
	  background-color:#F7F7F7;
      width: 230px;
      height: 100px;
	  top: 10px;
	  left: 50px; 
	  visibility: hidden;     
   }
</style>

</head>

<body>

<div id="popup">
   <p>Soy un popup flotante. puedes <a href="javascript: cerrarPopup('popup');">cerrarme</a> si quieres</p>
</div>

Feature title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
Story Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
Story Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
Story Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
Story Title

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

Bueno, esto es todo, como podreis observar el resultado final es genial, perfecto, increíble... ( me encanta xD )

Espero que os ayude.

Un saludo