Desbordamiento con diseño de posicionamiento absoluto/relativo

durante bastante tiempo estoy jugueteando con un tema de diseño específico que obviamente me estoy acercando al camino equivocado.Desbordamiento con diseño de posicionamiento absoluto/relativo

Aquí es el enfoque desglosado en sus componentes básicos:

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

con el siguiente CSS:

.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;   
}

Lo que estoy tratando de hacer es tener la stretched div utilizando todos disponibles espacio de ventana vertical (menos algunos píxeles arriba y abajo para encabezado y pie de página) y centrado horizontalmente con un fijo con.

Esto parece funcionar bastante bien. El problema es que la propiedad overflow: auto; no se aplica al contenido inner como yo quiero. Cuando some text... se alarga, el div inner se superpone a mi contenedor y no muestra barras de desplazamiento.

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

quiero evitar tener barras de desplazamiento en el cuerpo de la página y en lugar de tener el desbordamiento gestionado por las barras de desplazamiento en el interior del inner div, con lo que stretched siempre visible por completo.

que podría aplicar el mismo truco con position: absolute; top: 0; ... a los inner div también, pero luego tengo que especificar la altura de header + someControls de forma explícita, lo que quiero evitar, porque es diferente en todas mis páginas.

Esta es la forma en que funciona como yo quiero que (a excepción de la parte top: 40px;): fiddle #2

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

Fuente

2012-04-24 FlxMgdnz

+1 para una pregunta bien estructurada y probándose. – MarioDS

¿Se requiere compatibilidad con IE7? – thirtydot

No necesariamente. Sería bueno, sin embargo. – FlxMgdnz

Hey ¿por qué se define la posición absoluta en la hoja de estilo

sustituir éste

.stretched { 

    width: 250px; 
    margin: 30px auto 20px; 
    background-color: green; 
}

Demostración en directo http://jsfiddle.net/rohitazad/Rpdr9/366/

Actualizado js violín http://jsfiddle.net/rohitazad/Rpdr9/368/

Fuente

2012-04-24 08:55:12

Gracias! Tenía que hacer que mi pregunta fuera más precisa, sería genial si revisara el segundo violín que agregué a mi pregunta. – FlxMgdnz

Eliminar

position: absolute;

y añadir

border: 10px solid green;

http://jsfiddle.net/Rpdr9/367/

EDIT: Si no te gusta enorme frontera, puede cambiar el tamaño del borde de 1px.

border: 1px solid green;

Incluso esto funciona.

Fuente

2012-04-24 08:58:57 Ankit

¡Gracias! Pero quiero evitar las barras de desplazamiento en el cuerpo de la página, parece que tengo que hacer que mi pregunta sea más específica. El div 'stretched' siempre debe ser completamente visible, y el desbordamiento debe ser manejado por barras de desplazamiento en el div 'inner'. – FlxMgdnz

¿Te refieres a algo como esto - http://jsfiddle.net/Rpdr9/369/? – Ankit

Sí, pero sin la altura fija. Por favor revisa el otro violín que agregué a mi pregunta. – FlxMgdnz

No creo que esto sea posible con CSS puro (... que funciona en todos los navegadores comunes).

He aquí un método que utiliza la especificación old Flexbox: http://jsfiddle.net/thirtydot/xRr7e/

Por desgracia, sólo works in navegadores WebKit/Firefox.

Es hora de utilizar unas líneas de JavaScript para este diseño ..

Fuente

2012-04-24 12:01:09 thirtydot

Desbordamiento con diseño de posicionamiento absoluto/relativo

Respuesta

Cuestiones relacionadas