CSS Box soll über den ganzen Bildschirm erscheinen

darton

Lt. Junior Grade
Dabei seit
Okt. 2004
Beiträge
274
Hallo!
Ich habe hier ein kleines CSS-Problem. Ich möchte gerne, dass die im folgenden CSS-Code bezeichnete sidebar sich bis ans Ende der Seite erstreckt. Der Inhalt hat eine Höhe von 1000px. Eigentlich müsste doch die sidebar durch das height: 100% über den gesamten Bildschirm erscheinen. Warum passiert das nicht?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body, html {   
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;
    height: 90px; 
    min-height: 90px;    
    background-color: #000;
}

#sidebar {    
    width: 300px;
    height: 100%; 
    float: left; 
    border: 1px solid #000;    
}

#content {    
    height: 1000px;
    background-color: #fff;
    position: relative;
    margin-left: 302px;    
}
</style>
</head>

<body>
<div id="header">

</div>

<div id="sidebar"></div>
<div id="content"></div>
</body>

</html>
 

F_GXdx

Captain
Dabei seit
März 2006
Beiträge
4.028
Ich hab hier Chrome und es geht.
 

darton

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Okt. 2004
Beiträge
274
Hmm...also im Firefox geht es nicht. Laut Firebug scheint das html-Tag in der Höhe irgendwann zu enden und der Inhaltsteil schießt darüber hinaus.
 

chriz0101

Lt. Junior Grade
Dabei seit
Aug. 2011
Beiträge
257
Ich hatte das Problem auch schon öfters. Height mit 100% wird seit XHTML meines Wissens nichtmehr von jedem Browser erkannt/umgesetzt. Hab dann mittels Javascript das ganze immer "nachkorrigiert"
 

w0nd4bra

Commander
Dabei seit
März 2008
Beiträge
2.282
Es geht deshalb nicht, weil du kein umschließendes Element hast, also du hast für das Element keine Höhe angegeben. So wird der Wert für dein DIV auf auto gesetzt.

Sollte eigentlich funktionieren, wenn du html und body height: 100% noch hinterher gibts, von daher komisch...

Lass mal spaßeshalber die Doctypes weg und gugg was passiert.
 

aledander

Ensign
Dabei seit
Jan. 2004
Beiträge
220
Hallo zusammen

Die einzige Lösung, die ich per CSS gefunden habe

HTML:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
    body, html {
    height: 100%;
    }
     
    * {
    margin: 0;
    padding: 0;
    }
     
    #header {
    width: 100%;
    height: 90px;
    background-color: #000;
	position: absolute;
	z-index: 3
    }
     
    #sidebar {
		width: 300px;
		height: 100%;
		float:left;
		border-right: 1px solid #000;
    }
     
    #content {
		background-color: #fff;
		float: left;
    }
	
	#wrapper {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1
	}
	
	.inhalt {
		position: absolute;
		top: 90px;
		padding: 20px 10px 0;
	}
	
    </style>
    </head>
     
    <body>
    <div id="header">
     
    </div>
     
    <div id="wrapper">
        <div id="sidebar">
            <div class="inhalt">
                Hier ist der Inhalt der Sidebar
            </div>
        </div>
        <div id="content">
            <div class="inhalt">
                Hier ist der Inhalt des contents
            </div>
        </div>
    </div>
    </body>
     
    </html>
Dabei werden die zwei Bereiche nochmal extra in einem Wrapper gekapselt.
Das Problem bei deiner Idee ist der Header. Sobald bei CSS 100% als Höhe festgelegt wird,
bezieht sich das bei DIVs normalerweise immer auf das Elternelement. Da du Body und HTML auf 100% gesetzt hast, nimmt quasi das DIV auch 100% Höhe an.

Getestet mit Opera, FF, IE, Chrome... Hoffe es klappt.

Grüße
Alex
 

darton

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Okt. 2004
Beiträge
274
Funktioniert leider so auch nicht.
Der Text, der bei mir im Inhaltsblock steht, ist relativ lang. Du kannst ja mal ganz viele <p>&nbsp;</p> in den Inhaltsblock einfügen, irgendwann wird der Rahmen der Sidebar dann wieder zu kurz.
 

Jesterfox

Fleet Admiral
Dabei seit
März 2009
Beiträge
37.921
Hm, ich kanns hier grad nicht probieren, aber: trifft das zu frühe Ende evtl. mit dem Browserfenster zusammen, während der Inhalt länger ist und man scrollen muss?

Falls ja: probier mal min-height: 100% anstelle von height: 100% für body und html.
 
Top