Adaptacion de height

mdk · #1 (**permalink**) 12/02/2011, 05:00

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.

kseso? · #2 (**permalink**) 12/02/2011, 12:02

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.

mdk · #3 (**permalink**) 12/02/2011, 18:20

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

kseso? · #4 (**permalink**) 13/02/2011, 07:55

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>pruebas de Kseso?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; position: relative;}
html, body {
  height: 100%;
  background: #f5f5f5;
}
#contenedor {
  position: absolute;
  top: 40px;
  bottom: 0;
  margin: 0 10%;
  background: #fe0;
  width:80%;
}
</style>
</head>
<body>
  <div id="contenedor">              
  </div>
</body>
</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.

mdk · #5 (**permalink**) 13/02/2011, 09:25

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.

kseso? · #6 (**permalink**) 13/02/2011, 10:32

Cita:

Iniciado por mdk

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.

mdk · #7 (**permalink**) 13/02/2011, 13:23

Cita:

Iniciado por kseso?

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?

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?

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?

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.

kseso? · #8 (**permalink**) 14/02/2011, 08:21

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

mdk · #9 (**permalink**) 14/02/2011, 12:52

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.