CSS Box soll über den ganzen Bildschirm erscheinen

darton · 28. Februar 2012

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 · 28. Februar 2012

Ich hab hier Chrome und es geht.

darton · 28. Februar 2012

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 · 28. Februar 2012

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 · 28. Februar 2012

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 · 28. Februar 2012

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 · 28. Februar 2012

Funktioniert leider so auch nicht.
Der Text, der bei mir im Inhaltsblock steht, ist relativ lang. Du kannst ja mal ganz viele <p> </p> in den Inhaltsblock einfügen, irgendwann wird der Rahmen der Sidebar dann wieder zu kurz.

w0nd4bra · 29. Februar 2012

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

probiert?

Jesterfox · 29. Februar 2012

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.

Suche

CSS Box soll über den ganzen Bildschirm erscheinen

darton

Lt. Junior Grade

F_GXdx

Captain

darton

Lt. Junior Grade

chriz0101

Lt. Junior Grade

w0nd4bra

Commander

aledander

Ensign

darton

Lt. Junior Grade

w0nd4bra

Commander

Jesterfox

Legende

Ähnliche Themen