Container über ganzen Bildschirm...

SebiPuck

Erfahrenes Mitglied
Hallo, ich habe ein kleines Problem.
Leider schaffe ich es nicht mit height: auto; oder height: 100%;

meinen Container, welcher als Hintergrund für die Website erstellt wurde in die gewünschte Höhe zu bekommen.
Er ist zwar so groß wie der größte Teil der page,
jedoch habe ich an der page noch einen div (features) angehängt,
welcher dann nicht mehr von dem Hintergrund Container (site-bg) miteinbezogen ist.

Hier ein Screenshot von dem Problem:

Unbenannt.PNG

Hier der Code:

PHP:
#wrap{
width: 971px;
height: 100%;
margin: auto;

-webkit-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 9px 0px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 9px 0px rgba(0, 0, 0, 1);
}

#page{
width: 950px;
min-height: 400px;
background: #fff;
/* TOP RIGHT BOTTOM LEFT -> begin with top, continue in clockwise*/
padding: 10px 10px 10px 10px;
}

#site-left{
width: 600px;
padding: 20px;
border: 1px solid #E8E8E8;
background: url(images/content-bg.png) #fff repeat;
}

.article{
width: 550px;
margin-bottom: 35px;
}

.article h2{
font-family: 'MinecraftRegular';
font-size: 21px;
color: #27123f;
background: url(images/article-seperator.png) left bottom repeat-x;
padding: 0px 0px 12px 10px ;
display: block;
margin-bottom: 15px;
}

.article-text{
width: 530px;
}

#features{
width: 950px;
height: 500px;
background: #fff;
/* TOP RIGHT BOTTOM LEFT -> begin with top, continue in clockwise*/
padding: 10px 10px 10px 10px;
}

HTML:

HTML:
<div id="site-bg">	
	
		<div id="wrap">
			<div id="page">
				<div id="site-left">
				
					<div class="article">
					
						<h2>Server ist online !</h2>
						
							<div class="article-text">
							
							<p>
								Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
								invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
								et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
								ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
								nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
								At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
								takimata sanctus est Lorem ipsum dolor sit amet.
							</p>
							
							
							</div>
						</div>
						
					<div class="article">
					
						<h2>Changelog ist vorhanden !</h2>
						
							<div class="article-text">
							
							<p>
								Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
								invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
								et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
								ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
								nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
								At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
								takimata sanctus est Lorem ipsum dolor sit amet.
							</p>
							
							
						</div>
					</div>
					
					<div class="article">
					
						<h2>Shops sind offen !</h2>
						
							<div class="article-text">
							
							<p>
								Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
								invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
								et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
								ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
								nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
								At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
								takimata sanctus est Lorem ipsum dolor sit amet.
							</p>
							
							
						</div>
					</div>
					
			</div>
		</div>
		

		<div id="features">
		<h1>lalalalal</h1>
		</div>
		
		</div>
	
	</div>



INFO:
Ich will nicht "body" als background verwenden !

Bitte helft mir so schnell es geht, ist ziemlich dringend,
Vielen Dank im Voraus,
LG

#Edit:
habe den Fehler gefunden.
#wrap ist der container, in welchem alle anderen betroffenen sind, der stand auf 100%, musste auf auto gestellt werden, geht nun wunderbar ^^
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück