Überlauf bei absoluter / relativer Positionierung

Question

Apr 24, 2012, 10:43 AM

Überlauf bei absoluter / relativer Positionierung

seit geraumer zeit fummele ich an einer bestimmten layoutangelegenheit herum, bei der ich mich offensichtlich dem falschen weg nähere.

Hier ist der Ansatz in seine Grundkomponenten unterteilt:

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

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

Was ich versuche zu tun, ist dasstretched div nutzt den gesamten verfügbaren vertikalen Darstellungsbereich (abzüglich einiger Pixel darüber und darunter für Kopf- und Fußzeile) und wird horizontal zentriert, wobei ein fester Punkt mit.

Das scheint ziemlich gut zu funktionieren. Das Problem ist, dass dieoverflow: auto; Eigenschaft wird nicht auf die angewendetinner Inhalt, wie ich es will. Wannsome text... wird länger, dieinner div überlappt meinen Container und zeigt keine Bildlaufleisten.

Hier ist die Geige:Geige # 1

Ich möchte vermeiden, dass Bildlaufleisten auf dem Seitenkörper angezeigt werden und stattdessen der Überlauf durch Bildlaufleisten in derinner div, so machenstretched immer gut sichtbar.

Ich könnte den gleichen Trick mit anwendenposition: absolute; top: 0; ... zuminner div auch, aber dann muss ich die Höhe von angebenheader + someControls explizit, was ich vermeiden möchte, weil es auf allen meinen Seiten anders ist.

So funktioniert es, wie ich es möchte (mit Ausnahme des Teilstop: 40px;):Geige # 2

Was mache ich hier falsch? Danke im Voraus!