Przepełnienie z układem pozycjonowania bezwzględnego / względnego

Question

Apr 24, 2012, 10:43 AM

Przepełnienie z układem pozycjonowania bezwzględnego / względnego

od jakiegoś czasu bawię się konkretnym układem, który oczywiście zbliża się w niewłaściwy sposób.

Oto podejście z podziałem na podstawowe elementy:

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

z następującym 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>

To, co próbuję zrobić, to miećstretched div wykorzystując całą dostępną pionową przestrzeń rzutni (minus kilka pikseli powyżej i poniżej dla nagłówka i stopki) i będąc wyśrodkowanym poziomo za pomocą ustalonego.

To wydaje się działać całkiem dobrze. Problem polega na tym, żeoverflow: auto; właściwość nie jest stosowana doinner treść, jakiej chcę. Gdysome text... staje się dłuższy,inner div pokrywa się z moim kontenerem i nie pokazuje pasków przewijania.

Oto skrzypce:skrzypce # 1

Chcę uniknąć posiadania pasków przewijania na treści strony i zamiast tego mieć przepełnienie zarządzane przez paski przewijania wewnątrzinner div, tworząc w ten sposóbstretched zawsze całkowicie widoczny.

Mogę zastosować tę samą sztuczkęposition: absolute; top: 0; ... doinner div, ale potem muszę określić wysokośćheader + someControls wyraźnie, których chcę uniknąć, ponieważ jest różny na wszystkich moich stronach.

Tak to działa, jak chcę (z wyjątkiem częścitop: 40px;):skrzypce # 2

Co ja tu robię źle? Z góry dziękuję!