Foros del Web » Creando para Internet » CSS »

cajas div high=100% separadas del borde superior

Estas en el tema de cajas div high=100% separadas del borde superior en el foro de CSS en Foros del Web. Hola: Alguien sabe como hacer para que un div que ocupa el 100% de la altura de la pantalla, quede separado de su borde superior ...
  #1 (permalink)  
Antiguo 05/11/2010, 16:15
 
Fecha de Ingreso: noviembre-2010
Mensajes: 4
Antigüedad: 7 años, 1 mes
Puntos: 0
Pregunta cajas div high=100% separadas del borde superior

Hola:
Alguien sabe como hacer para que un div que ocupa el 100% de la altura de la pantalla, quede separado de su borde superior sin que se pierda su parte inferior?
Tengo html y body con high=100%, y dentro de ellos una caja, también high=100%.
Cuando intento separla a ella o su contenido con cualquier método (position, padding,margin) del borde superior, se pierde una parte por abajo y si la fijo abajo con bottom=0 no puedo separarla de arriba.
Alguien sabe como solucionarlo?
Gracias,
E
  #2 (permalink)  
Antiguo 05/11/2010, 16:22
Avatar de andres_aquino  
Fecha de Ingreso: septiembre-2010
Ubicación: $("#place").html("FDW");
Mensajes: 138
Antigüedad: 7 años, 3 meses
Puntos: 24
Respuesta: cajas div high=100% separadas del borde superior

Probaste a utilizar la prodiedad overflow? Tal vez pueda funcionarte este método y además colocarle el padding.

Código:
div {
  height: 100%;
  overflow: hidden;
  padding: 10px;
}
Saludos
__________________
Te sirvió mi ayuda? +1 ;D
Andy Aquino - @aquiandres
  #3 (permalink)  
Antiguo 05/11/2010, 16:34
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: cajas div high=100% separadas del borde superior

Si no entendí mal quieres meter una caja de altura 100 dentro de otra caja de altura 100 y quieres que te quede espacio entre caja y caja.
Si esa es la situación pues te digo que no es posible
Si caja a=100 , caja b=100 y espacio entre cajas c=10 resulta que b+c=110 por lo que nunca entraria en a.
Prueba con b=90. Es decir al 100% tienes que restarle lo que quieres que se separe y entonces sí podrás acomodarla en la posición que deseas.

En caso de haber entendido mal tu consulta, simplemente ignora esta respuesta.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #4 (permalink)  
Antiguo 06/11/2010, 00:02
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 7 años, 1 mes
Puntos: 9
Respuesta: cajas div high=100% separadas del borde superior

A ver, tu pregunta no es muy acertada, la próxima vez intenta explicarte un poquito mejor...

Tras la regañina, jejeje, decirte que lo que puedes hacer es una caja de 90% de alto, con un margin ó padding superior del 5%, con lo que 90% + 5% + 5% = 100%. Si no tiene borde no creo que tengas ningún problema.

De todas formas, podrías intentar con algún framework javascript, que te calculan en todo momento la altura de la ventana y reajustan el contenido, haciendo que la caja que tu quieras siempre quede del 100% de alto...

Bueno chavales, a programar!!!

Saludos!!
  #5 (permalink)  
Antiguo 06/11/2010, 06:50
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Respuesta: cajas div high=100% separadas del borde superior

Como ya te han comentado, si tú tienes el 100% de la altura de la pantalla (height) y le quieres añadir un margen superior e inferior... Evidentemente por poco margen que le introduzcas se te va a salir de la pantalla... Así que... Si quieres hacer que todo se vea a pantalla completa, házlo de la siguiente manera...

margin-top: 2%;
margin-bottom: 2%;
height: 96%;

Es la única forma... Por cierto, te recomiendo que los márgenes lo hagas así, y no utilizando "position: aboslute | relative | fixed..."


Saludos, y cuéntanos qué tal te va...
  #6 (permalink)  
Antiguo 08/11/2010, 03:57
 
Fecha de Ingreso: noviembre-2010
Mensajes: 4
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: cajas div high=100% separadas del borde superior

Muchas gracias a todos!
Pero...por no hacer la pregunta más complicada de lo que ya era, omití, desde mi gran ignorancia, decir que lo que realmente pretendo es dejar tanto en la parte superior como en la inferior un espacio de una altura determinada para colocar unas imágenes que siempre se visualicen.
Para ello tengo un par de cajas (de 200px arriba y de 100px abajo) con las imágenes correspondientes de fondo, y fijadas al top una y al bottom la otra.
Lo que quisiera es que el contenido de una 3a caja ocupase exactamente el espacio entre estas 2 cajas superior e inferior, independientemente de pantallas, resoluciones, navegadores y cualquier otro de factor que pueda afectarle, apareciendo, si fuesen necesarias, barras de desplazamiento vertical.
Y claro, los paddings o margins en % no me permiten librar exactamente los espacios de 200px superior y 100px inferior.
Supongo que mi pregunta vuelve a ser complicada, pido disculpas de antemano.
Alguien podría darme alguna idea?
1000 gracias de nuevo y saludos,
E
  #7 (permalink)  
Antiguo 08/11/2010, 04:38
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: cajas div high=100% separadas del borde superior

Hola
Mirá este ejemplo de Mikmoro: http://www.araudi.net/ejemplos/3_capas.html
Fijate en el código que ahí está el css.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #8 (permalink)  
Antiguo 08/11/2010, 04:43
 
Fecha de Ingreso: noviembre-2010
Mensajes: 4
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: cajas div high=100% separadas del borde superior

Uau!
Por ahi veo truquillos nuevos!
Muchísimas gracias C2am, ahora mismo lo pruebo!
Saludos,
E
  #9 (permalink)  
Antiguo 08/11/2010, 08:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: cajas div high=100% separadas del borde superior

enricbarbar:
Cuanto más se acota la pregunta, más precisas serán las respuestas optenidas.
Esa estructura se suele conocer como "pie abajo", "sticky footer" o similares.
Son varias las técnicas empleadas para conseguirlo.
En la página que le enlaza C2am (www.araudi.net) tiene algunos ejemplos, así como aquí, o recurriendo a google:
http://www.google.es/#hl=es&source=h...cky+footer+css
http://www.google.es/#hl=es&source=h...=pie+abajo+css
  #10 (permalink)  
Antiguo 08/11/2010, 13:54
 
Fecha de Ingreso: noviembre-2010
Mensajes: 4
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: cajas div high=100% separadas del borde superior

Vale:
Está a punto de estallarme la cabeza pero voy logrando acercarme a lo que quiero.
Supongo que modificar el aspecto y la longitud de la barra de scroll ya deben ser palabras mayores...
De nuevo, mil gracias a todos.
Saludos,
E
  #11 (permalink)  
Antiguo 08/11/2010, 15:42
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: cajas div high=100% separadas del borde superior

Hola:

Cita:
Iniciado por enricbarbar Ver Mensaje
Supongo que modificar el aspecto y la longitud de la barra de scroll ya deben ser palabras mayores...
Eso solo lo podrás hacer para IE, en los demás navegadores no lo puedes modificar, al menos sólo con CSS, con algún lenguaje de programación lo desconozco.

Saludos.


Etiquetas: cajas, high, separadas, superior, bordes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:47.