Hacer que el contenido HTML expanda para llenar la ventana

Question

Tengo una página HTML dividida verticalmente en

• Header
• cuerpo
• pie de página

El cuerpo a su vez se divide horizontalmente en

• Una gran DIV a la izquierda rodeada por barras de desplazamiento, que muestra una porción de un diagrama
• Un formulario a la derecha

El encabezado y el pie son de altura fija. El cuerpo debe ampliar verticalmente para llenar la parte de la ventana no ocupada por el encabezado y pie de página.

de ancho fijo similar, el formulario se y el panel de desplazamiento debe ampliar horizontalmente para llenar la anchura de la ventana.

El diagrama es muy grande (hasta 10x10 pantallas completas) por lo que no puede mostrar toda ella. En lugar quiero mostrar lo más posible (usando toda la ventana) para que el usuario tiene que desplazarse lo menos posible.

Asimismo, no puede utilizar JavaScript, debido a que algunos usuarios son necesariamente paranoico y debe inhabilitarla.

Algunas opciones que he considerado:

• Una tabla con anchura y la altura de la célula panel de desplazamiento se establece en 100% y todos los otros a 1%
  No funciona. La tabla (y por tanto la página) se expande para contener todo el diagrama, incluso con la posición absoluta en el DIV panel de desplazamiento.
• absoluta posicionamiento para compensar el panel de la parte inferior de la página por la altura del pie de página
  Obras pero imprecisa: la altura del pie depende del tamaño de la fuente actual y si se envuelve texto. Esto significa que debe dejar un amplio margen para garantizar que no se solapen.
• Coloque el esquema de un IFRAME
  La mejor solución que he encontrado con guiones inválidos, pero limita lo que podemos hacer en las secuencias de comandos cuando son activado.

Me he dado cuenta de que Google Maps utiliza una zona de tamaño fijo para el mapa cuando las secuencias de comandos están desactivados. Si Google ha renunciado a este problema quiere decir que no es factible?

Answer 1

Uso de la altura:. 100% atributo CSS debe hacer que funcione

A ver si Dave Woods 100% Disposición Altura uso de CSS trabaja para usted .

Answer 2

Es un aspecto poco conocido de la propiedad CSS position: absolute; que le dará el diseño que busca. Puede colocar un elemento absolutamente en las 4 direcciones, arriba, derecha, abajo y de izquierda. Esto significa que un cuadro puede ser tan fluido como el navegador y siempre permanecerá a la misma distancia de los bordes de su contendor que especifique.

div {
    position: absolute;
}
#main {
    top: 8em; // 8em
    left: 0; 
    bottom: 8em; // 8em
    right: 300px;
    overflow: auto;
}
#header {
    top: 0;
    left: 0;
    right: 0;
    height: 8em;
}
#sidebar {
    top: 8em;
    right: 0;
    bottom: 8em;
    width: 300px;
    overflow: auto;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 8em;
}

Para un ejemplo visita http://www.sanchothefat.com/dev/ diseños / cssframes.html y luego ver la fuente y separe el CSS para ver cómo se hace en un ejemplo más complejo.

Si se toma este enfoque tiene que posicionar absolutamente todos los principales <div>s contenedores. El uso de EMS si font-size es una preocupación.

PS. Hay una Gotcha en IE6 que meta la pata (shock!), Sin embargo el ejemplo que he dado tiene un repliegue IE6. Sólo una altura fija va a estar bien sin embargo.