✔ Absoluter Div mit 100% Höhe wird am Viewport abgeschnitten

[wildlifetramper]

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

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%;
}

 

[Maik]

Hi,

wandel die height:100%-Deklaration für #vorhang in height:768px um, was der Höhe der Grafikdatei entspricht, so wird sie auch nicht mehr abgeschnitten, wenn die Viewporthöhe runterskaliert wird.

mfg Maik

 

[wildlifetramper]

Servas

Leider funktioniert dann overflow:hidden nicht mehr. Die Seite ist immer 768px hoch... sollte ich noch woanders was ändern?

 

[hela]

Hallo,
vielleicht kannst du den Vorhang-DIV fix positionieren, dann bewegt er sich beim scrollen eh nicht.

 

[wildlifetramper]

Joa ist ne Idee. Danke für die Anregung. Macht einen ganz interessanten Effekt beim Scrollen.

Mir wäre aber grundsätzlich die position:absolute Lösung lieber. Vielleicht gibt es doch noch eine Möglichkeit das absolute beizubehalten?

 

[Maik]

Leider funktioniert dann overflow:hidden nicht mehr. Die Seite ist immer 768px hoch

Stellt sich die Frage, was du nun willst: Einen vollständig sichtbaren Vorhang beim verkleinerten Viewport und Seitenscrollen, oder eben nicht.

mfg Maik

 

[wildlifetramper]

Ich dachte, es gäbe noch eine andere Möglichkeit. Und zwar: 100% der Seite, auch wenn der Vieport nur 80% der Seite ist. Ist so etwas nicht machbar?

 

[Maik]

Nein, denn die 100% beziehen sich nunmal auf die Viewporthöhe. Wird diese verkleinert, schneidet der Browser das Element unten ab, sobald nach unten gescrollt wird.

mfg Maik

 

[wildlifetramper]

Schade ..