zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Absoluter Div mit 100% Höhe wird am Vieport abgeschnitten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.04.2009, 22:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.04.2009
Beiträge: 6
tramper befindet sich auf einem aufstrebenden Ast
Standard Absoluter Div mit 100% Höhe wird am Vieport abgeschnitten

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%;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.04.2009, 22:42
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.629
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

Dann leg doch einfach den Vorhang mit auf das Hintergrundbild anstatt ein leeres HTML-Element dafür zu verschwenden.
__________________
github | http://dnaber.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.04.2009, 22:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.04.2009
Beiträge: 6
tramper befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 13.04.2009, 23:00
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #5 (permalink)  
Alt 13.04.2009, 23:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.04.2009
Beiträge: 6
tramper befindet sich auf einem aufstrebenden Ast
Standard

Hi, hat leider nichts geholfen dein Tipp. Aber danke.
Mit Zitat antworten
  #6 (permalink)  
Alt 13.04.2009, 23:10
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #7 (permalink)  
Alt 13.04.2009, 23:11
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

gute Nacht dann.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #8 (permalink)  
Alt 13.04.2009, 23:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.04.2009
Beiträge: 6
tramper befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 13.04.2009, 23:22
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.04.2009, 23:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.04.2009
Beiträge: 6
tramper befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:17 Uhr.