Problem: Vollbild mit weiterem Inhalt darunter

[lena]

Servus :)
Ich bin absolute Anfängerin, was Programmieren angeht. Dennoch möchte ich mich an meinem Portfolio versuchen.Jetzt bin ich auf ein Problem gestoßen, an dem ich schon seit mittlerweile 9 Stunden erfolglos rumprobiere.
Ich hoffe ihr könnt mir dabei helfen...

Und zwar habe ich eine div, die 100% auf 100% groß ist. Darin ist ein Bild, welches den Bildschirm voll ausfüllen soll. Ich habe die div mit overflow:hidden und position:absolute gestylt, hat soweit geklappt.
Dazu will ich aber, dass wenn man runter scrollt, weiterer Inhalt erscheint. Egal was ich mache, der Inhalt ordnet sich nie unter dem Bild an, sondern immer oben am Rand des Bildschirms.

Gibt es vielleicht eine Alternative zu overflow/ position:absolute? Ohne overflow und der absoluten Positionierung ordnet sich der Inhalt ja darunter an, aber dann ist das Bild nicht mehr 100% des Bildschirms hoch, sondern besitzt seine tatsächliche Höhe.

Hier der Code:

  
	<div class="rahmen">  
		<img src="Bilder/1projekt/1projekt01.jpg" alt="Berge" title="Berge">  
	</div>  
	  
	<div class="bottomproject"> </div>  
  
	<div class="projektansicht">  
		<div class="projektinhalt">  
			<p> hallo </p>  
		</div>  
	</div>  

  
.rahmen {  
	position: absolute;  
	width: 100%;  
	height:100%;  
	left: 0;  
	top:0;  
	z-index: -1;  
	overflow: hidden;  
}  
  
.rahmen img {  
	width: 100%;  
}  
  
.bottomproject {  
position: absolute;  
z-index: 2;  
bottom: 0;  
left: 0;  
height: 10px;  
width: 100%;  
background: #4de666;  
}  
  
.projektansicht {  
float: left;  
width: 100%;  
height: auto;  
background-color: #FFF;  
min-height: 400px;  
}  

Ich hoffe, dass mir jemand eine Lösung weiß, denn ich bin wirklich am Verzweifeln.
Vielen Dank schon mal :)

[molily]

Hallo,

Mit position: absolute nimmst du Elemente aus dem »normalen Fluss«. Damit verschieben sich nachfolgende nicht automatisch, stehen nicht darunter. Zwei Ideen:

1. Du positionierst beide Teile absolut, und der zweite Teil bekommt

top: 100%;

und fängt damit erst nach der Höhe des Viewports an.

http://codepen.io/molily/pen/jGKtC

2. Du verwendest die Einheit vh (Prozent der Viewport-Höhe). Das obige Element bekommt

height: 100vh;

Dann ist position: absolute nicht unbedingt nötig.

Die vh-Einheit unterstützen nur neuere Browser.

http://codepen.io/molily/pen/GzAxd

Vielleicht gibt’s noch einfachere Lösung, aber das fällt mir auf Anhieb ein.

Grüße
Mathias

[lena]

Vielen, vielen Dank. Hat mir sehr weitergeholfen und funktioniert jetzt einwandfrei.

Grüße,
Lena