martin
Well-Known Member
Hi
ich bin gerade etwas am Experimentieren mit DIVs und min-height, max-height usw. Eigentlich wollte ich mit etwas ganz Banalem beginnen, doch ich hänge schon fest und weiß nicht weiter. Was ich machen möchte, ist eine einfache Seite die 2Header hat (Position immer am Kopf der Seite, Größe statisch), 2 "Inhaltsbereiche" die ihre Größe dynamisch je nach Größe des Browserfensters ändern sollen, und eine Fusszeile, die wiederum in ihrer Größe statisch bleibt, sich aber immer am untersten Bildrand befinden soll.
Hier mal etwas Code von meinem ersten Versuch:
Irgendwie schaffe ich es nicht die Höhe der beiden InhaltsDIVs an die Höhe des Browserfensters anzupassen und somit auch nicht die Fusszeile an das Ende der Seite zu plazieren. Wenn ich mit min-height: 100% arbeite, wird das DIV immer gleich groß wie das komplette Fenster, ich möchte aber, dass es so groß wird wie die Fensterhöhe minus die Höhen der anderen DIVs.
Ich hoffe ich habe mich halbwegs verständlich ausgedrückt. Geht mein Vorhaben überhaupt ohne javascript?
thx
ich bin gerade etwas am Experimentieren mit DIVs und min-height, max-height usw. Eigentlich wollte ich mit etwas ganz Banalem beginnen, doch ich hänge schon fest und weiß nicht weiter. Was ich machen möchte, ist eine einfache Seite die 2Header hat (Position immer am Kopf der Seite, Größe statisch), 2 "Inhaltsbereiche" die ihre Größe dynamisch je nach Größe des Browserfensters ändern sollen, und eine Fusszeile, die wiederum in ihrer Größe statisch bleibt, sich aber immer am untersten Bildrand befinden soll.
Hier mal etwas Code von meinem ersten Versuch:
PHP:
<html>
<head>
<style>
html, body
{
margin: 0;
padding: 0;
}
.rahmen {
border: 1px solid red;
}
.titel {
width: 100%;
height: 99px;
color: white;
background-color: #0e3852;
}
.titel2 {
top: 100px;
width: 100%;
height: 60px;
color: black;
}
.links {
width:200px;
min-height: 400px;
overflow: auto;
}
.rechts {
min-width: 500px;
min-height: 400px;
background-color: white;
}
.fusszeile {
width: 100%;
height: 30px;
color: white;
background-color: #0e3852;
}
</style>
</head>
<body height="100%">
<div class="rahmen" style="min-height:100%;background-color: #edf3fa;">
<div class="rahmen titel">Titel - Dunkel mit Bild</div>
<div class="rahmen titel2">Titel2 - Logo und Menü</div>
<div style="position:static;">
<div class="rahmen links" style="position:absolute;left:0px;">Linke Seite - Menü2</div>
<div class="rahmen rechts" style="position:absolute;left:200px;">Rechte Seite - Hauptfenster</div>
</div>
<div class="rahmen fusszeile">Fusszeile</div>
</div>
</body>
</html>
Irgendwie schaffe ich es nicht die Höhe der beiden InhaltsDIVs an die Höhe des Browserfensters anzupassen und somit auch nicht die Fusszeile an das Ende der Seite zu plazieren. Wenn ich mit min-height: 100% arbeite, wird das DIV immer gleich groß wie das komplette Fenster, ich möchte aber, dass es so groß wird wie die Fensterhöhe minus die Höhen der anderen DIVs.
Ich hoffe ich habe mich halbwegs verständlich ausgedrückt. Geht mein Vorhaben überhaupt ohne javascript?
thx