cajas div high=100% separadas del borde superior

[enricbarbar]

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

[andres_aquino]

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

[C2am]

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

[dargorg]

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

[ayukkonen]

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

[enricbarbar]

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

[C2am]

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

[enricbarbar]

Uau!
Por ahi veo truquillos nuevos!
Muchísimas gracias C2am, ahora mismo lo pruebo!
Saludos,
E

[kseso?]

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

[enricbarbar]

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

[jomaruro]

Hola:

Iniciado por enricbarbar

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.