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

martin · 15.05.2012, 10:33

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


			
<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

midnight · 15.05.2012, 11:10

Guck mal hier: http://peterned.home.xs4all.nl/examples/csslayout1.html

Kamikaze · 15.05.2012, 11:26

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.

martin · 15.05.2012, 14:14

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


			

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


			
<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 · 15.05.2012, 14:41

du musst nur dem div mit dem langen Inhalt, also div#liste auch 100% Höhe zuweisen

martin · 15.05.2012, 14:50

@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". :-(

Binfort · 15.05.2012, 15:45

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.

martin · 16.05.2012, 09:13

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.

Binfort · 16.05.2012, 11:01

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

15.05.2012, 10:33	#1
martin Registered User Registrierungsdatum: Apr 2004 Beiträge: 749	[HTML/CSS] Höhe von DIVs automatisch anpassen 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-Code: <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

15.05.2012, 11:10	#2
midnight Registered User Registrierungsdatum: Jan 2007 Ort: Saarlouis Beiträge: 101	Guck mal hier: http://peterned.home.xs4all.nl/examples/csslayout1.html __________________ Viele Grüße midnight

15.05.2012, 11:26	#3
Kamikaze Parasprite Registrierungsdatum: May 2005 Ort: /Earth/Europe/Germany/Karlsruhe Beiträge: 9.634	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. __________________ [ bsdlogo 2.0 - Wiki - Ports - LibreOffice Pakete - PM schreiben - kamikaze@bsdforen.de ] Disclaimer: My posts represent my perception. Errors and incompleteness are to be expected, I deny any responsibility to know everything.

15.05.2012, 14:14	#4
martin Registered User Registrierungsdatum: Apr 2004 Beiträge: 749	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-Code: 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-Code: <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>

15.05.2012, 14:41	#5
Binfort Registered User Registrierungsdatum: Mar 2006 Ort: HH Beiträge: 143	du musst nur dem div mit dem langen Inhalt, also div#liste auch 100% Höhe zuweisen __________________ nix genaues weiß man nicht

15.05.2012, 14:50	#6
martin Registered User Registrierungsdatum: Apr 2004 Beiträge: 749	@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". :-(

15.05.2012, 15:45	#7
Binfort Registered User Registrierungsdatum: Mar 2006 Ort: HH Beiträge: 143	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. __________________ nix genaues weiß man nicht

16.05.2012, 09:13	#8
martin Registered User Registrierungsdatum: Apr 2004 Beiträge: 749	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.

16.05.2012, 11:01	#9
Binfort Registered User Registrierungsdatum: Mar 2006 Ort: HH Beiträge: 143	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 __________________ nix genaues weiß man nicht

Dieses Thema betrachten zurzeit 1 Personen. (0 registrierte Benutzer und 1 Gäste)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten: