Foros del Web » Creando para Internet » CSS »

Adaptacion de height

Estas en el tema de Adaptacion de height en el foro de CSS en Foros del Web. Hola a todos, hacía tiempo que no entraba por los foros, pero me ha surgido una duda. Estoy con la maquetación de CSS en una ...
  #1 (permalink)  
Antiguo 12/02/2011, 05:00
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 15 años, 1 mes
Puntos: 11
Adaptacion de height

Hola a todos, hacía tiempo que no entraba por los foros, pero me ha surgido una duda.

Estoy con la maquetación de CSS en una nueva web, y se me ha planteado un problema, que no se si podrá tener solución.

Quiero, crear una capa que se centre en el ancho de la pantalla, y eso lo tengo claro, pero además quiero, que la capa, aparezca desde el margen superior a unos 40px, que sería con margin-top:40 o top:40, hasta ahí todo correcto, pero además quiero que la altura de esta capa, sea lo que falta para llegar a la parte inferior de la página, pero, sin que llegue a mostrarse el scroll lateral, si no es que la capa, por el contenido que lleva le obligue a sacarlo. No sé si me explico, jejeje el problema me surge, cuando pongo height:100% que efectivamente, el alto llega a bajo, pero sacando un scroll con los 40px que le he dado del margen superior, ¿cómo podría hacer para que no me mostrara esos 40px añadidos?

Saludos.

P.D: Puedo hacerlo con javascript, pero quiero evitarlo, gracias.
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #2 (permalink)  
Antiguo 12/02/2011, 12:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Adaptacion de height

Y ¿sólo hay una caja (div) o la estructura contiene más elementos como cabecera o pie de página o...?
Y ¿cómo se nota (visualmente) que la caja llega hasta abajo y el margen superior? ¿con fondos, bordes...)
Porque es el típico layout de caja con poco contenido con altura 100% (de espacio libre) y pie abajo.

Como observará por mis dudas, necesitaría algo más de información. Y lo mejor sería un enlace a la página. O como mínimo, los códigos implicados.
  #3 (permalink)  
Antiguo 12/02/2011, 18:20
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 15 años, 1 mes
Puntos: 11
Respuesta: Adaptacion de height

Enlace a la página no hay, porque estoy trabajando en local, y segundo porque estoy haciendo pruebas antes de meterme en materia.

La idea va siendo basicamente esta.

Código:
<head>
<style type="text/css">
.contenedor {	
	position: absolute;
	min-width:1024px;
	left:50%;
	margin-left: -512px;
	top: 40px;
	height: 100%;
	background-color: #4556C3;
}	
</style>
</head>

<body style="margin: 0; background-color: #000000">

<div class="contenedor"></div>
El problema como ves ahi, es que si pongo height: 100%, me parece un scroll, alargandose la página 40px hacia bajo, como podria hacer para que llegara bajo la capa, pero sin que tuviera esos 40px de mas? vamos.. seria algo como height: 100% - 40px; pero eso ya se que no se puede hacer ^^
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #4 (permalink)  
Antiguo 13/02/2011, 07:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Adaptacion de height

Imagino que a medida que avance en su realización, lo siguiente no será funcional ni recomendable.
Así mismo, este tipo de construcciones se deben utilizar para casos/situaciones muy concretas y donde todas las variables estén bajo control.

Me lo tomo, y también la soluccción propuesta, como un mero ejercicio teórico, pues después tendrá que añadir contenidos, header, footer... etc.

Vamos con ello:
Si hace uso de la propiedad position con valor absolute sólo es cuestión de recordar que las coordenadas complementarias (top, right, bottom, left) no sólo sirven para indicar un punto de referencia para situar una caja, sino también para marcar desde dónde a dónde se extenderá la misma.
Así que ahora ya es fácil dejar un espacio superior y ocupar el resto de la ventana sin que aparezca el scrool:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>pruebas de Kseso?</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <style type="text/css">
  6. * {margin:0; padding:0; position: relative;}
  7. html, body {
  8.   height: 100%;
  9.   background: #f5f5f5;
  10. }
  11. #contenedor {
  12.   position: absolute;
  13.   top: 40px;
  14.   bottom: 0;
  15.   margin: 0 10%;
  16.   background: #fe0;
  17.   width:80%;
  18. }
  19. </head>
  20.   <div id="contenedor">              
  21.   </div>
  22. </body>
  23. </html>

Si se fija y va un poco más allá con este ejemplo, verá que también serviría para centrar verticalmente en la ventana un elemento sin usar los márgenes negativos y su peligro de desaparición al disminuir la ventana.

Pero no olvide las premisas iniciales.
  #5 (permalink)  
Antiguo 13/02/2011, 09:25
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 15 años, 1 mes
Puntos: 11
Respuesta: Adaptacion de height

Si, realmente, de momento no estoy dándole uso como ya te comente, pero en cuanto tenga toda la información recopilada sobre las dudas que tengo, me pondré al 100%.

Respecto al código que me has puesto, gracias, pero no llega hasta bajo del todo la capa, se queda con la altura de una línea de texto, ya que no le has definido el height, y lo que quiero, es que llegue bajo del todo, sea cual sea la resolución de pantalla, y sin que llegue a sacar el scroll la página a no ser que se haya rellenado ese espacio de la tabla y la supere.

Ya es más una cuestión de curiosidad de si se puede llegar a hacer, que necesidad.
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #6 (permalink)  
Antiguo 13/02/2011, 10:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Adaptacion de height

Cita:
Iniciado por mdk Ver Mensaje
Respecto al código que me has puesto, gracias, pero no llega hasta bajo del todo la capa, se queda con la altura de una línea de texto,
Cita:
Pues no sucede eso en mis pruebas con ff 3.6, chrome, safari, ópera, ie9RC, ie8 e ie7 (estos dos últimos emulados en ietester). Todos en vi$ta.
Debería especificar qué navegador y qué SO, pues no tengo dotes adivinatorias.
ya que no le has definido el height
Cita:
sólo es cuestión de recordar que las coordenadas complementarias (top, right, bottom, left) no sólo sirven para indicar un punto de referencia para situar una caja, sino también para marcar desde dónde a dónde se extenderá la misma.
, y lo que quiero, es que llegue bajo del todo, sea cual sea la resolución de pantalla, y sin que llegue a sacar el scroll la página a no ser que se haya rellenado ese espacio de la tabla y la supere.
Cita:
Y eso hace mi ejemplo. Salvo lo último (aumentar al aumentar el contenido) que no he verificado y que ya le adelanto que posíblemente no lo haga. Pero lea con detenimiento mi comentario anterior, especialmente los considerandos iniciales.
Ya es más una cuestión de curiosidad de si se puede llegar a hacer, que necesidad.
Se agradecería, más que nada para evitar repeticiones innecesarias o respuestas no ajustadas a sus necesidades, que lea atentamente las respuestas y en caso de no comprender algo lo pregunte y que sea lo más preciso al exponer sus cuestiones, pues no hay panaceas, cada caso concreto requiere sus particularidades.
  #7 (permalink)  
Antiguo 13/02/2011, 13:23
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 15 años, 1 mes
Puntos: 11
Respuesta: Adaptacion de height

Cita:
Iniciado por kseso? Ver Mensaje
Pues no sucede eso en mis pruebas con ff 3.6, chrome, safari, ópera, ie9RC, ie8 e ie7 (estos dos últimos emulados en ietester). Todos en vi$ta.
Debería especificar qué navegador y qué SO, pues no tengo dotes adivinatorias.
Cierto, no dije ni el navegador ni la versión. En mi caso fue con IE8, en FF 3.6 no lo llegue a probar, lo he probado y sí que va, pero en las estadísticas que tengo de mi última web, me suele aparecer que la gente sigue utilizando más IE, si todos utilizaran FF, para mi maravilloso, me quitaría problemas y comeduras de cabeza.

Cita:
Iniciado por kseso? Ver Mensaje
sólo es cuestión de recordar que las coordenadas complementarias (top, right, bottom, left) no sólo sirven para indicar un punto de referencia para situar una caja, sino también para marcar desde dónde a dónde se extenderá la misma.
Vaya, eso no lo sabía, porque como ya he comentado, mis pruebas en IE siempre no dan el resultado que espero.

Cita:
Iniciado por kseso? Ver Mensaje
Y eso hace mi ejemplo. Salvo lo último (aumentar al aumentar el contenido) que no he verificado y que ya le adelanto que posíblemente no lo haga. Pero lea con detenimiento mi comentario anterior, especialmente los considerandos iniciales.
Pues realmente no me interesaría ese ejemplo, porque lo que quería es que se fuera estirando. No obstante, estoy viendo que por la misma historia de siempre (incompatibilidades entre navegadores) cambiaré la forma de mostrar el diseño de la página por otra alternativa que tenía en mente.

Cita:
Iniciado por kseso? Ver Mensaje
Se agradecería, más que nada para evitar repeticiones innecesarias o respuestas no ajustadas a sus necesidades, que lea atentamente las respuestas y en caso de no comprender algo lo pregunte y que sea lo más preciso al exponer sus cuestiones, pues no hay panaceas, cada caso concreto requiere sus particularidades.
Siempre antes de preguntar algo, reviso casos similares en el foro, hago mis pruebas, y si no consigo el efecto deseado o me quedo estancando, es cuando pregunto cómo ya has dicho, lo más claro y preciso posible.

Saludos.
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #8 (permalink)  
Antiguo 14/02/2011, 08:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Adaptacion de height

¿Ya lo intentó adaptando alguna de las estructuras utilizadas para logar lo conocido como "pie abajo"?
Porque si es condición indispensable que aumente de tamaño si aumentan los contenidos más allá del tamaño de la ventana, y como posiblemente termine incorporando más div´s (header, pie de página y hasta quizás columnas laterales), creo que algunas de las composiciones realizadas para lograr el "pie abajo" le serán de utilidad. Sólo tendrá que modificarla un mínimo.
  #9 (permalink)  
Antiguo 14/02/2011, 12:52
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 15 años, 1 mes
Puntos: 11
Respuesta: Adaptacion de height

Si, ya hice muchas pruebas, pero al final me voy a decantar por una opción alternativa, y es que baje, según sea necesario, y que no llegue bajo, a no ser que sea por el contenido que lleva.

No obstante, muchas gracias kseso por tu interés y tu ayuda, y felicitarte por los tutoriales que tienes hechos. Hace tiempo vi unos cuantos que me sirvieron de mucha utilidad, y hasta ayer no me di cuenta que habías sido tú el que los había hecho.

Saludos.

P.D: No hace falta que me hables de usted, me considero joven.
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)

Etiquetas: height
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 23:27.