Absoluter Div mit 100% Höhe wird am Vieport abgeschnitten

tramper · #1 (**permalink**) 13.04.2009, 22:32

Hallo,

ich habe ein Problem mit einem absolut positionierten Div, dem ich die Höhe von 100% gegeben habe. Rechts davon befindet sich Content in einem 2. Div.

Wie man hier sieht, wird das Bild links (Vorhang) abgeschnitten, wenn man das Browserfenster soweit verkleinert, dass ein Scrollbalken entsteht. Anscheinend nimmt der Vorhang nur 100% der Höhe des Viewports ein, aber nicht 100% der Höhe des gesamten Dokuments.

Kann mir vielleicht jemand sagen, was ich ändern muss, damit die Höhe sich auf 100% des Dokuments bezieht? Eigentlich soll der Vorhang bis ans Ende der Seite gehen und nicht nur bis ans Ende des Viewports!!

Vielen Dank

Und hier sind die entsprechenden Styles (habe nur die mMn. relevanten reinkopiert):

Code:

html, body {
  	height:100%;
  	margin:0;
	padding:0;
}

*{
	margin:0;
	padding:0;
}

#maincontainer {
	background-position:170px 0;
	height: 68%;
	width: 630px;
	min-height: 360px;
	margin:0;
	position:relative;
	padding: 0 0 0 150px;
}

#page {
	background:url(../images/bg_text.png) no-repeat;
	padding:60px 60px 40px 60px;
	margin:0;
	width: 80%;
	position:relative;

}

#vorhang {
	background:url(../images/vorhang.png) no-repeat;
	position:absolute;
	z-index:2;
	overflow:hidden;
	width:180px;
	height:100%;
}

David · #2 (**permalink**) 13.04.2009, 22:42

Dann leg doch einfach den Vorhang mit auf das Hintergrundbild anstatt ein leeres HTML-Element dafür zu verschwenden.

tramper · #3 (**permalink**) 13.04.2009, 22:46

Wenns so einfach wär. Siehst du den Schatten oben, unter der Navigation? Der muss sich unter dem Vorhang befinde. Sonst sieht es blöd aus. Und er muss sich relativ zur Browserfenstergröße verhalten, also schrumpfen, wenn das Fenster kleiner wird... Daher muss ich den Vorhang in ein eigenen Div packen mit z-index höher als der Rest der Elemente.

IChao · #4 (**permalink**) 13.04.2009, 23:00

body benötigt wohl statt height:100% eher min-height:100%, sonst kann er nicht mitwachsen, und position:relative, damit sich der #vorhang auf ihn bezieht. Kann auch falsch sein, habs nicht probiert.

tramper · #5 (**permalink**) 13.04.2009, 23:03

Hi, hat leider nichts geholfen dein Tipp. Aber danke.

IChao · #6 (**permalink**) 13.04.2009, 23:10

Vielleicht hast du in der Eile was übersehen. Bei mir geht es ganz gut.

IChao · #7 (**permalink**) 13.04.2009, 23:11

gute Nacht dann.

tramper · #8 (**permalink**) 13.04.2009, 23:16

Ja, ich glaub auch, dass ich was übersehen habe. Aber ich finde den Fehler nicht. Komischerweise zeigt mir FireBug auch bei min-height:100% an, dass der Body ziemlich klein ist (kleiner als das gesamte Dokument). Sehr seltsam, ich kapier das nicht

IChao · #9 (**permalink**) 13.04.2009, 23:22

Firebug sollte dir aber anzeigen, dass da immer noch height:100% aus html, body {height: 100%} herumspukt. Wenn du das in Firebug machen willst, musst du body {height: auto !important} dazustellen. Oder so. Bis dann.

tramper · #10 (**permalink**) 13.04.2009, 23:25

Jo, ich änder das auf meinem lokalen Server, daher ist es online nicht zu sehen. Den 2. Satz hab ich zwar nicht verstanden, aber dann mal geruhsame Nacht

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18