Estouro com layout de posicionamento absoluto / relativo

Question

Apr 24, 2012, 10:43 AM

Estouro com layout de posicionamento absoluto / relativo

por algum tempo eu estou mexendo em um layout específico que eu obviamente estou me aproximando do jeito errado.

Aqui está a abordagem dividida em seus 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>

com o seguinte 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>

O que estou tentando fazer é ter ostretched div usando todo o espaço de viewport vertical disponível (menos alguns pixels acima e abaixo para cabeçalho e rodapé) e sendo centralizado horizontalmente com um fixo com.

Isso parece funcionar muito bem. O problema é que ooverflow: auto; propriedade não é aplicada aoinner conteúdo como eu quero. Quandosome text... fica mais longo, oinner div sobrepõe meu contêiner e não mostra nenhuma barra de rolagem.

Aqui está o violino:violino # 1

Eu quero evitar ter barras de rolagem no corpo da página e, em vez disso, ter o estouro gerenciado por barras de rolagem dentro doinner div, fazendo assimstretched sempre inteiramente visível.

Eu poderia aplicar o mesmo truque composition: absolute; top: 0; ... aoinner div também, mas então eu tenho que especificar a altura deheader + someControls explicitamente, o que eu quero evitar, porque é diferente em todas as minhas páginas.

É assim que funciona como eu quero (exceto para a partetop: 40px;):violino # 2

O que eu estou fazendo errado aqui? Desde já, obrigado!