Desbordamiento con diseño de posicionamiento absoluto / relativo

Question

Apr 24, 2012, 10:43 AM

Desbordamiento con diseño de posicionamiento absoluto / relativo

Hace bastante tiempo que estoy jugando con un asunto de diseño específico al que obviamente me estoy aproximando de manera incorrecta.

Aquí está el enfoque desglosado a sus componentes básicos:

<code><!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="stretched">
    <div class="header">SOME HEADER</div>
    <div class="someControls">
        <input type="button" value="click me"/>
        <input type="button" value="no me"/>
    </div>
    <div class="inner">
        some text...
    </div>
</div>
</body>
</html>
</code>

con el siguiente css:

<code>.stretched {
    position:absolute;
    height:auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 250px;
    margin: 30px auto 20px;
    background-color: green;
}

.inner {
    margin:10px;
    background-color: red;   
    overflow: auto;        
}
</code>

Lo que estoy tratando de hacer es tener lastretched div utilizando todo el espacio de la ventana vertical (menos unos pocos píxeles arriba y abajo para el encabezado y el pie de página) y se centra horizontalmente con un fijo con.

Esto parece funcionar bastante bien. El problema es que laoverflow: auto; propiedad no se aplica a lainner contenido como yo quiera Cuandosome text... se hace más largo, elinner div se superpone a mi contenedor y no muestra barras de desplazamiento.

Aquí está el violín:violín # 1

Quiero evitar tener barras de desplazamiento en el cuerpo de la página y, en su lugar, gestionar el desbordamiento mediante barras de desplazamiento dentro de lainner div, haciendo asístretched Siempre enteramente visible.

Podría aplicar el mismo truco conposition: absolute; top: 0; ... alinner div también, pero luego tengo que especificar la altura deheader + someControls explícitamente, lo que quiero evitar, porque es diferente en todas mis páginas.

Así es como funciona como lo deseo (excepto la partetop: 40px;):violín # 2

¿Qué estoy haciendo mal aquí? ¡Gracias por adelantado!