attribute - tags html5

Hacer que el contenido HTML se expanda para llenar la ventana

Question

Tengo una página HTML dividida verticalmente en

• Encabezamiento
• Cuerpo
• Pie de página

El cuerpo a su vez se divide horizontalmente en

• Un DIV grande a la izquierda rodeado de barras de desplazamiento, que muestra una parte de un diagrama
• Un formulario a la derecha

El encabezado y el pie de página son de altura fija. El cuerpo debe expandirse verticalmente para llenar la porción de la ventana que no está ocupada por el encabezado y el pie de página.

De forma similar, la forma es de ancho fijo y el panel de desplazamiento debe expandirse horizontalmente para llenar el ancho de la ventana.

El diagrama es muy grande (hasta 10x10 screenfuls) por lo que no puedo mostrar todo. En cambio, quiero mostrar tanto como sea posible (usando toda la ventana) para que el usuario tenga que desplazarse lo menos posible.

Tampoco puedo usar javascript, porque algunos usuarios son necesariamente paranoicos y deben deshabilitarlo.

Algunas opciones que he considerado:

• Una tabla con el ancho y la altura de la celda del panel de desplazamiento establecidos en 100% y todos los demás en 1%
  No funciona La tabla (y, por lo tanto, la página) se expande para contener todo el diagrama, incluso con un posicionamiento absoluto en el panel de desplazamiento DIV.
• Posicionamiento absoluto para compensar el panel desde la parte inferior de la página por la altura del pie de página
  Funciona pero es inexacto: la altura del pie de página depende del tamaño de fuente actual y de si el texto está envuelto. Esto significa que debo dejar un gran margen para garantizar que no se superpongan.
• Coloque el diagrama en un IFRAME
  La mejor solución que he encontrado con scripts desactivados, pero limita lo que puedo hacer en scripts cuando están habilitados.

Observé que Google Maps usa un área de tamaño fijo para el mapa cuando los scripts están deshabilitados. Si Google se dio por vencido con este problema, ¿eso significa que no es factible?

Answer 1

Usar la altura: el atributo 100% CSS debería hacer que funcione.

Vea si Dave Woods 100% Height Layout Using CSS funciona para usted.

Answer 2

Es un aspecto poco conocido de la position: absolute; Propiedad de CSS que le dará el diseño que está buscando. Puede posicionar un elemento absolutamente en TODAS las 4 direcciones, arriba, derecha, abajo e izquierda. Esto significa que una caja puede ser tan fluida como el navegador y siempre permanecerá a la misma distancia de los bordes de su contenedor que usted 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 ver un ejemplo, consulte http://www.sanchothefat.com/dev/layouts/cssframes.html y luego vea la fuente y separe el CSS para ver cómo se hace en un ejemplo más complejo.

Si toma este enfoque, debe colocar absolutamente TODO el contenedor principal <div> s. Use ems si el tamaño de letra es una preocupación.

PD. Hay un error en ese IE6 enredado (¡shock!), Sin embargo, el ejemplo que he proporcionado tiene un retorno de IE6. Sin embargo, solo una altura fija estará bien.