inco
New member
Hi folks,
habe das Thema unter einem anderen thread schon mal angeschnitten,
dort jedoch unter falschem Titel, weil es um ein table-iframe-Layout ging.
Ich suche das gleich nun ausschließlich mit DIV,
die Lösungen im Forum funktionieren nicht recht.
Bspw. diese hier: http://forum.jswelt.de/css-x-html/33306-div-height-ganz-unten.html
Drei DIV übereinander sollen zusammen (maximal) 100% innere Fensterhöhe ergeben.
Das obere möglichst statisch (bspw. 80px Höhe),
das untere ebenfalls (bspw. 40px Höhe),
das mittlere dagegen soll maximal den Rest an Höhe einnehmen (max-height).
Ist der Inhalt des mittleren kleiner, darf es kleiner bleiben,
ist er größer, soll es scrollbar sein (overflow:auto).
Der Sinn:
oben und unten bündig sollen z.B. Menüpunkte erscheinen (immer sichtbar).
Eigenschaften wie z.B. max-height werden aber von IE6 nicht unterstützt,
Höhenangaben wie 100% führen zur "Sprengung" der Fensterhöhe,
height: auto funzt ebenfalls nicht und würde die Höhe auch nicht begrenzen.
Opera 7.5+, FF1.5+, IE6/7 sollten es schon können.
Habt Ihr Ideen?
Hier mal vom Aufbau her ein Anschauungsbeispiel:
Ich versuche das Gleiche übrigens ebenfalls mit einem table-Layout und nur einem (scrollbaren) DIV in der mittleren Zelle, da mir das ebenso recht sein soll.
habe das Thema unter einem anderen thread schon mal angeschnitten,
dort jedoch unter falschem Titel, weil es um ein table-iframe-Layout ging.
Ich suche das gleich nun ausschließlich mit DIV,
die Lösungen im Forum funktionieren nicht recht.
Bspw. diese hier: http://forum.jswelt.de/css-x-html/33306-div-height-ganz-unten.html
Drei DIV übereinander sollen zusammen (maximal) 100% innere Fensterhöhe ergeben.
Das obere möglichst statisch (bspw. 80px Höhe),
das untere ebenfalls (bspw. 40px Höhe),
das mittlere dagegen soll maximal den Rest an Höhe einnehmen (max-height).
Ist der Inhalt des mittleren kleiner, darf es kleiner bleiben,
ist er größer, soll es scrollbar sein (overflow:auto).
Der Sinn:
oben und unten bündig sollen z.B. Menüpunkte erscheinen (immer sichtbar).
Eigenschaften wie z.B. max-height werden aber von IE6 nicht unterstützt,
Höhenangaben wie 100% führen zur "Sprengung" der Fensterhöhe,
height: auto funzt ebenfalls nicht und würde die Höhe auch nicht begrenzen.
Opera 7.5+, FF1.5+, IE6/7 sollten es schon können.
Habt Ihr Ideen?
Hier mal vom Aufbau her ein Anschauungsbeispiel:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/[COLOR="Red"]strict[/COLOR].dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Layout-Test</title>
<style type="text/css">
html, body {
/*
overflow: hidden;
*/
height:100%;
margin: 0;
padding: 0; <?/* fuer Opera (7.5?) */?>
}
body {
font-size: 86%;
color: #930;
font-family: Arial, Helvetica, sans-serif;
}
#main {
width: 768px;
margin: 0px auto;
border: 1px dotted orange;
border-right: 2px solid orange;
border-bottom: 2px solid orange;
background-color: #EEE ; /* testweise */
}
#oben {
height: 80px;
background-color: yellow;
}
#inhalt {
position: absolute;
margin: 80px 0;
top: 0px;
width: 100%;
overflow:auto;
height: 100%;
}
#unten {
position: absolute;
bottom: 80px;
color: white;
height: 40px;
background-color: green; /* testweise */
}
</style>
</head>
<body>
<div id="main">
<div id="oben">
menü<p>titel
</div>
<div id="inhalt">
<p style="line-height:400px;border:1px solid red">dummy</p>
<p style="line-height:400px;border:1px solid red">dummy</p>
<p style="line-height:400px;border:1px solid red">dummy</p>
</div>
<div id="unten">
menü
</div>
</div>
</body>
</html>Ich versuche das Gleiche übrigens ebenfalls mit einem table-Layout und nur einem (scrollbaren) DIV in der mittleren Zelle, da mir das ebenso recht sein soll.
Zuletzt bearbeitet:
