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:
<!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>
z następującym 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;
}
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ę!