14/02/2012, 09:16
|
Colaborador | | Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses Puntos: 539 | |
Respuesta: Problemas con un diseño fluid Cita:
Iniciado por Nekko Tengo una web con un header y footer que deben quedar visibles todo el tiempo, para lo cual utilizo position:fixed. Añádir z-index (principalmente por el header)
En el centro tenemos el contenido y debe añadir una barra de scroll para navegarlo cuando sea necesario. ¿El scroll debe ser en la caja del contenido o el de la ventana (html/body)?
Mi problema es que el contenido se adapta bien en la parte superior, pero en la parte inferior no, queda contenido oculto. Para que no pase, le di height: 75%, pero obviamente en resoluciones grandes queda muy mal (deja un espacio en blanco debajo). No necesita altura. Los div´s crecen en función de su contenido. Excepto si está fuera del flujo del html (limpiar float, clear...)
Si le doy 100%, queda contenido debajo de la capa del footer.
Cómo puedo hacer para que ese div adapte su alto al espacio que queda libre entre header y footer? Al sacar su encabezado y pie de página del discurrir natural del html (fixed) no son tenidos en cuenta al dibujar el resto de elementos (su contenedor). Así que debe hacer que éste último deje el espacio correspondiente a los fixed.
En la parte superior lo consigue con el top: 100px. Eso hará que esa caja se desplace sólo a efectos "visuales". Pero su presencia a efectos del flujo será la que le corresponde. (Otra cosa es que utilizase esas propiedades (top|left|right|bottom) para darle tamaño)
Yo optaría por añadir tal margen superior e inferior para que siempre (con más o menos contenido) deje un espacio libre equivalente al header y footer entre el inicio y final de su contenido y las cajas fixed. |