[HTML/CSS] Höhe von DIVs automatisch anpassen

martin

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:
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. :ugly:

Ich hoffe ich habe mich halbwegs verständlich ausgedrückt. Geht mein Vorhaben überhaupt ohne javascript?

thx
 
Du kannst das was du vor hast optisch vortäuschen.

Benutze den Hintergrund für deinen Main-Bereich mit body und platziere deinen footer absolut.
 
Danke für eure Hilfe.
Ich habe jetzt das Beispiel von midnight mal aufgegriffen und es versucht an meine Bedürfnisse anzupassen. Das klappt ganz gut, bis ich versuche das "content" DIV in zwei aufzuteilen. Zwar klappt das auch, nur habe ich ein Problem, wenn der Inhalt vom DIV "content" zu lang wird. Dann nämlich werden trotz overflow: auto KEINE Scrollbars angezeigt.

Hier mal der neue Code:

test.css
PHP: 
html,body {
	margin:0;
	padding:0;
	height:100%; /* needed for container min-height */
	background:gray;
	
	font-family:arial,sans-serif;
	font-size:small;
	color:#666;
}


div#container {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	width:100%;
	background:#edf3fa;
	
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/

	min-height:100%; /* real browsers */
}

div#header {
        background:#0e3852;
        height: 100px;
	padding:1em;
	border-bottom:10px solid #edf3fa;
	
}

div#content {
    position: relative;
    padding:1em 1em 5em; /* bottom padding for footer */
    min-height: 300px;
    min-width: 800px;
}

div#liste {
    position:absolute;
    top:0px;
    left:0px;
    width:200px;
    min-height: 300px;
    overflow:auto;
}

div#details {
    position:absolute;
    top:0px;
    left:200px;
    background:white;
    min-height: 300px;
    min-width: 600px;
}

div#footer {
    height: 30px;
    position:absolute;
    width:100%;
    bottom:0px; /* stick to bottom */
    background:#0e3852;
    border-top:6px double gray;
}


.mnu {
    height: 60px;
    border-bottom: 1px solid #EEEEEE;
}

.mnu_chk {
    height: 60px;
    background:#0e3852;
    color: white;
    border-bottom: 1px solid #EEEEEE;
}

test.htm
PHP: 
<html>
<head>
    
    <link rel="stylesheet" type="text/css" href="test.css" />    
    
</head>
<body>

<div id="container">    
    
    <div id="header">
        
        <img src="/conf/images/logo1.png" height="80px">
        <img src="/conf/images/logo2.png" height="80px">
        
    </div>
    <div id="content">
        
        <div id="liste">
            <div class="mnu">Link1</div>
            <div class="mnu_chk">Link2</div>
            <div class="mnu">Link3</div>
            <div class="mnu">Link3</div>
            <div class="mnu">Link3</div>
            <div class="mnu">Link3</div>
            <div class="mnu">Link3</div>
            <div class="mnu">Link3</div>
            <div class="mnu">Link3</div>
            <div class="mnu">Link3</div>
            <div class="mnu">Link3</div>
            <div class="mnu">Link3</div>
        </div>
        <div id="details">Details</div>        
        
    </div>
    
    <div id="footer">Fusszeile</div>

</div>    
    
</body>
 
@Binfort

damit klappen zwar die Scrollbars, allerdings wird damit das DIV "liste" nicht mehr an die Höhe zwischen header und footer angepasst, sondern lediglich an die min-height des "content". :-(
 
das div#content benötigt ebenfalls eine feste Höhe

Da Header und Footer ja fest sind, kann der #content also den gesamten Zwischenraum haben? Die Style Eigenschaften min-height können aus #content, #liste und #details entfernt werden. Die inneren div's bekommen 100% Höhe, beim Content ist es schwieriger weil die Header und Footer einen px Wert haben. Ich habe es mal mit 70% bei #content versucht... schau aber selbst einmal.
 
genau das ist ja das Problem. Header und Footer haben fixe px Werte, den Rest sollen "liste" und "details" auffüllen. Wenn ich die height in % angebe stimmt es nur für eine bestimmte Größe des Browserfensters, für wesentlich größere oder kleinere aber nicht mehr. :confused:
 
an diesem Punkt würde ich sagen, das es mit html & css allein nicht zu lösen ist

Ein bisschen javascript sollte helfen:

window.innerHeight enthält die Höhe des Fensters in px, davon ziehst du #header 100px und #footer 30px ab und setzt das Ergebnis mit style.height auf #content

schmutzig, aber schnell
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben