como mantener un div al ras de la ventana??

Hola una duda como puedo hacerle para mantener un div al ras de la ventana de mi explorador, pero dependiendo del tamaño de mi pagina, ya intente colocarle position fixed y el valor de bottum en 0.

Pero esto solo hace que se mantenga en en la orilla de la ventana, es parecido a lo que quiero, pero en si lo que quiero es que si la pagina es muy larga todo el contenido quede normal, y si el contenido es muy poco, el div se quede hasta abajo al ras de la ventana.

Dale al elemento:

Código :

buttom: 0;
position: fixed;
width: 100%;

Suerte.

te entendí después de leerte 253 veces. con el fixed no puedes.... ya que como indica es fixed, si usamos un relative, nos hace el efecto contrario... es decir sigue abajo pero del último contenedor (yo uso div).

así que creo que tienes dos opciones.... un apaño... que es lo suelo hacer, o usar un script.

yo normalmente el food, bueno este div ultimo... lo suelo no pegar al fondo de la pantalla.. asi que creo que no te vale.

si usamos el script... sería variar mediante js, el css de position. es decir.... para hacerlo fino... primero intentariamos saber el tamaño de la ventana del navegador (height en este caso), y comparar entre el tamaño de ventana del navegador y el contenedor DIV si este último es mayor... zas!! le pones un.. position:relative, y si resulta ser menos le aplicas al elemento un position relative.

ahora a currar y preparar el script. suerte!!

Si algo asi me imaginaba, perdon por no expresarme bien, hay alguna forma de averiguar si hay scroll, no si el usuario dio scroll sino si la ventana tiene scroll, es solo que creo que seria el modo mas eficas de hacer esto, si la ventana tiene scroll obio el ultimo div no nesecita manipularse pero si no tiene se puede colocar el atributo fixed y bootom 0.

rod00x3 escribió:

Sí. Comparando la altura de la ventana con la altura del body del documento. Si el segundo es mayor que el primero, entonces hay scroll.

Parece que Silvestre tiene una idea muy grande, porque no nos ayudas con el script y lo vamos mejorando todos?

buenoooo... si no obstante yo creo que lo bueno a veces es desarrollar uno mismo.. odio el copy paste, de todas formas ya he terminado un par de scripts uno para el foro de cristalab... (otro post) y otro para mi personalmente... (sobre object txt/html). Seguramente busque un hueco... pero es que personalmente no me llama interés esta solución... ya que creo que no es muy visual.. (para mi) el tema de tener un "contenedor" fijo.... por lo que no he desarrollado el tema.

bueno lo dicho tal vez en dos dias tenga un hueco... y lo plasme. pero... no me gusta acaparar post

A ver, el problema me llamó la atención porque es parecido a otro que acabo de encontrarle solución, así que he hecho un código de ejemplo:

http://www.fivemedia.com.ar/dexter/test105.php

He usando JQuery para algunas cosas y he usado un CSS reset. Además he agregado compatibilidad para IE8 porque personalmente hago todo en HTML5 pero esto no es necesario.

Probado en Opera 11.51, FF7, GC14 e IE8. Sé que no funcionará en IE6 y tampoco me importa .

Preguntas aquí por favor.

Discúlpame Silvestre, no creí que estuvieras tan ocupado. Y tienes razón, no sería justo para nosotros que desarrollaras tanto y nos quitaras crédito en el post.

[/sarcasmo]

Se ve bien DriverOp, el problema en el que yo me enfrento a menudo es cuando hay poco contenido que no llegue a cubrir todo el documento y el footer se va para arriba, ¿Alguna solución en mente?

Kinduff:
Es exactamente lo que he resuelto con el ejemplo que he puesto .

No amigo DriverOp, lamentablemente lo que has puesto no funciona, lo curioso es que de entrada parece muy facil, pero ya con compativilidad y todas esas cosas, es todo un reto, la mejor prueba para saber que funciona es que en el navegador en elque estes presiona control y menos, y veras como tu footer sube con todo y el contenido, cuando deberia quedarse abajo.

Sin duda creo que la solucion esta con javascript, en el onload y el onResize, pero el principal problema que me encuentro es que no encuentro ni una sola instruccion que me debuelva el alto total de la ventana del cliente y el alto total de mi div principal, para comparar, y actuar en base a ello, y algunas instrucciones que parece que me dan esos valores, no debuelven lo mismo en los diferentes navegadores.

Lo peor de todo es que el contenido es dinamico,y no me es posible saber el alto.

Jumm ¿Abra alguna instruccion que nos devuelba false o true si hay o no scroll??

Suerte y espero ser uno de los primeros en postear el codigo 100% funcional y compatible

Amigo rod00x3, lamento que no te funcione, en lo que a mi respecta, lo que hice, hace lo que has pedido.

Y los datos que quieres están en la página que he hecho si le prestas atención al código. Ten en cuenta que no pretendí resolver absolútamente todos los casos, es solo una prueba de concepto.

De antemano una disculpa a DriverOp, tienes razon, funciona bien, nadamas me deje llevar y no lo prove en tros navegadores he ironicamente no funciona en IE9.

Pero lo prove en FF,IE8 y si funciona a la perfeccion, gracias y tendre mas cuidado antes de contestar

Pues que no funcione en IE9 sí me preocupa, de momento no tengo un IE9 a mano pero tan pronto me desocupe de lo que estoy haciendo le echo un ojo.

algun detallito debe estar al aire..,. DriverOp, en "Mozilla/5.0 (Windows; U; Windows NT 6.0; es-ES; rv:1.9.2.23) Gecko/20110920 Firefox/3.6.23", tampoco sale al 100%. es decir sale en la cola de la página.. es decir si aumenta el texto se va para abajo.

Si DriverOp, ¿No ves como lo haces en su "güeb"?

Silvestre_:
Ya no tengo esa versión de FF así que no la puedo probar (supongo que habrá alguna forma de tener más de una versión de FF instalada, pero no sé cómo se hace...)

Kinduff:
No entendí tu comentario.

DriverOp escribió:

Me estoy burlando de este tipo.

a ver... solo lo decía a título informativo... ya que también me parecía estraño que funcionara, menos en el MIE9..

no obstante denoto que el señor Kinduff, tiene poco sentido del humor y ve en mis aportes y ayudes una burla....
..ya me salí de otro hilo para evitar enfrentamientos... y a este le queda muy poco.

hay que agradecerle a este Claber su buen sentido del humor...

Lo que pasa Silvestre es que debes de aprender a ser un poco más humilde, no puedes llegar aquí diciendo que y aparentando que eres muy bueno si ni siquiera nos enseñas un pedazo de tu código. Al ver tu web da la impresión que no sabes absolutamente nada y que solo te basas en palabras.

He revisado tus otros comentarios y de verdad que me revienta que actúes de esa manera, de ahí la hostilidad.

[/offtopic]

rod00x3 y el resto.
Lo que quieres hacer se llama Sticky Footer (si es que entendí bien y no me perdí en esta locura que tienen acá) y puedes conseguir una forma muy efectiva de hacerlo en http://www.cssstickyfooter.com/

Funciona, yo ya la he usado en algunos proyectos y me funciona muy bien.

Wow, el código del cssstickyfooter es tan sencillo pero tan ingenioso...

Si, está bastante bueno, no lo conocía.

Bueno aqui está mi humilde código.... tal como escribi al principio...

1._ hacemos una pequeña función para saber la altura de la ventana del navegador, debido a las diferentes versiones y nagadores.. tenemos varios condicionales (if.. else).

Código HTML :

function AlturaNav(){
/* función para elegir opción según navegador y versión que admita */
var AltoNavegador = 750;var AnchoNavegador = 800;
   if (document.body && document.body.offsetHeight) { AltoNavegador = document.body.offsetHeight; AnchoNavegador = document.body.offsetWidth;}
      if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetHeight ) { AltoNavegador = document.documentElement.offsetHeight;AnchoNavegador = document.documentElement.offsetWidth;}
         if (window.innerWidth && window.innerHeight) {AltoNavegador = window.innerHeight;AnchoNavegador = window.innerWidth;}
return(AltoNavegador);

lo acabamos con return, para asi al hacerle una llamada, nos devuelva el valor (altura). Sobra la parte de los width, por no usarlo... pero bueno lo podeis borrar para aligerar unos byts.

luego una vez tenemos la altura del navegador viene propiamente nuestra funcion, en la que segun la altura de la ventana y la altura del "div" contenedor de la página, nos cambiará la "position a fixed o a relative

Código HTML :

function algo(){

var Alto=AlturaNav();
var miAlto=document.getElementById('cuerpo').offsetHeight;
var resultado=Alto - document.getElementById('piie').offsetHeight;


if (document.getElementById('piie').style.position=="fixed"){

   if(  resultado > miAlto ){
      document.getElementById('piie').style.top=resultado+"px";
      document.getElementById('piie').style.position="fixed";
   }
   else{
      document.getElementById('piie').style.top="0px";
      document.getElementById('piie').style.position="relative";
   }
}else{
   if(  Alto > miAlto ){
      document.getElementById('piie').style.top=resultado+"px";
      document.getElementById('piie').style.position="fixed";
   }
   else{
      document.getElementById('piie').style.top="0px";
      document.getElementById('piie').style.position="relative";
   }
}

}

y ya por último no tenemos que olvidar incluir detro de <script></script>

Código HTML :

window.onresize = algo

También en la tag

Código HTML :

<body onload="algo();">

de esta manera nos garantizamos su funcionamiento... También podría inlcluirse una llamada a la función despues de una accion "onclik" como la que incluyo en el botón.

como css solo puse... para construir un poco la página.. pero vale cualquier medida.

Código HTML :

<style>
body{background-color:black;color:white;}

#cuerpo{border:solid 1px white;display:block;width:500px;margin:0 auto;}

#piie{border:solid 1px white;position: fixed;width:498px;height:145px;top:700px;margin:0px;}

</style>

Para que el efecto quede bien es aconsejable que el ancho sea definido y no sea 100%.

un saludo y espero os sirva.

ejemplo

ah!! el código esta en bruto.... para mayor comprensión... pero clar, se puede seguir depurando, etc... y reducirlo a la mínima expresión.

<otra cosa en firefox 7, no consigo visualizar bien los cuadros de los post con cód HTML>

Se ve genial piolin, me gustó.

Una duda, ¿Por qué asignas la altura de 800x700?

bueno.. en realidad no debería ser necesario... a veces pongo los valores, por si fallara el refresco.. piensa que el script digamos que la funcion se realiza en tiempo de ejecución... y podría haber algún lapso, repescando esos valores "prestablecidos".

No obstante como digo es un código en bruto... luego sería ir limpiándolo.

creo que la solucion definitiva seria mas simple

Código Javascript :

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script>
window.onload = function() {
   $(window).resize(function() {
       $('#pie').css({ 'margin-top':($(window).height()-150)+'px'});
   });
   $(window).resize();
 } 
</script>

y en el css

Código CSS :

#pie {
   display: block;
   position:absolute;
   width:100%;
   height:200px;
}

Es todo y a mi me funciona de maravilla, ahora lo pueden animar ocultandolo la forma esta mejor explicada aqui [url=http://blog.rogersoto.com/blog/jquery-dentro-de-entradas-y-paginas-de-wordpress/][/url]