• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wrapper Background height

J

Johannes11

Neues Mitglied
Hi, ich habe hier schonmal vor einiger Zeit gepostet bezüglich eines Problemes was ich dachte gelöst zu haben. Der Wrapper der Seite sollte mit weisser (leicht transparenter) Backgroundfarbe über einem Backgroundfoto liegen und immer eine 100% Höhe haben, also quasi wie ein weisser Balken über dem Foto liegen. Das hat auch soweit alles gut geklappt nur jetzt ist mir ein Problem aufgefallen. Sobald das Browserfenster kleiner als der Content ist (und ein Scrollbalken erscheint) und man nach unten scrollt, hat der Wrapper keine 100% Höhe mehr, sondern bleibt auf der Höhe der ursprünglichen Fensterkante. Ich habe mal zwei Screenshots zum besseren Verständnis angehängt. Ich habe schon alles mögliche mit verschiedenen Höhen etc (und dem hier empfohlenen Sticky Footer) rumprobiert, kriege das Problem aber nicht gelöst.

Hier ist auch der HTML-Code (ich habe ihn mal aufs nötigste reduziert)

HTML: 
<head>
<style type="text/css">html {	background: url(img/background_5.png) no-repeat center center fixed;	-webkit-background-size:cover; 	-moz-background-size:cover; 	-o-background-size:cover;	-ms-background-size:cover; 	background-size:cover;}</style>
<link href="css/style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" language="javascript" src="css/script.js"></script>
</head>
<body> 
	<div id="wrapper">              		<div id="left">                         </div>  	             		 <div id="right">             			<div id="content">    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.				            			</div>         </div>        	</div>  
  </body>    </html>

Und der CSS-Code

Code: 
* {margin:0;padding:0;} 

html, body {height: 100%;}


#wrapper {
  background-color:rgba(255, 255, 255, 0.8);
  margin-bottom:0;
  margin-left:auto;
  margin-right:auto;
  margin-top:0;
  min-height:100%;
  text-align:left;
  width:820px;
}


#left {
	margin-top:20px;
	margin-left:75px;
	float:left;
	}


#right {
	margin-top:0px;
	width:500px;
	float:right;
	margin-right:44px;
	}
	
#content {
	margin-top:5px;
	width:360px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	line-height:17px;
	color:#4b4b4d;
	}

Es wäre super wenn mir da jemand bei helfen könnte.

Bis dahin schöne Grüße

Johannes

Anhang anzeigen 2789

Anhang anzeigen 2790
 
Ein Link zur Seite wäre interessant. So würde ich jetzt mal raten und sagen, ersetze "min-height:100%;" durch "height: 100%;".
 
Hi, ne daran liegt es nicht, ich hatte es schon ausprobiert. Die Seite ist noch nicht online, deswegen kann ich jetzt nur den Code hier posten. Keine Ahnung was ich noch machen soll ..

Schöne Grüße
 
Du brauchst noch einen inneren Container mit derselben Hintergrundfarbe.
#wrapper_innen {float:left;background-color:#xxx}
 
Hmm, ich hab mal einen zweiten, inneren Wrapper mit den Attributen eingebaut, aber die Backgroundfarbe füllt sich beim scrollen trotzdem nicht auf
 
Hallo, ich arbeite immer noch an dem Problem und habe jetzt mal den (sticky) footer eingebaut (mit 1px Höhe). Ich habe jetzt wahrscheinlich auch den Fehler gefunden, kriege es aber nicht behoben. Der Wrapper hat zwei Container (left und right). Der left-Container hat ein float:left Attribut und der right-Container float:right. Wenn ich bei dem right-Container das float-Attribut lösche funktionert alles und die Wrapper-Höhe ist immer automatisch über die ganze Höhe. Mit dem float-Attribut beim left-Container gibt es komischerweise keine Probleme und deswegen habe ich keine Ahnung wieso es bei dem right-Container nicht klappt (der braucht ja das float um an der richtigen Stelle zu sitzen). Und ohne das float kommt auch immer der Scrollbalken, egal wie groß das Fenster ist. Kann mir da jemand weiterhelfen? Hier sind nochmal die (neuen) Codes

HTML
HTML: 
  <head><style type="text/css">html {	background: url(img/background_5.png) no-repeat center center fixed;	-webkit-background-size:cover; 	-moz-background-size:cover; 	-o-background-size:cover;	-ms-background-size:cover; 	background-size:cover;}</style><link href="css/style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" language="javascript" src="css/script.js"></script></head><body> 	<div id="wrapper"> <div id="left"> </div> <div id="right"> <div id="content">    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 		            			</div> </div> </div>    
  <footer>   </footer>  </body>    </html>

und CSS

Code: 
* {margin:0;padding:0;} 

html, body {height: 100%;}




#wrapper {
  background-color:rgba(255, 255, 255, 0.8);
  margin-bottom:0;
  margin-left:auto;
  margin-right:auto;
  margin-top:0;
  min-height:100%;
  text-align:left;
  width:820px;
}




#left {
	margin-top:20px;
	margin-left:75px;
	float:left;
	}




#right {
	margin-top:0px;
	width:500px;
   /*      float:right;   */	
	}
	
#content {
	margin-top:5px;
	width:360px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	line-height:17px;
	color:#4b4b4d;
	}


#wrapper {
	min-height: 100%;
	width: 820px;
  	margin-left:auto;
  	margin-right:auto;
 	 margin-top:0;
	text-align:left;
	background-color: rgba(255,255,255,0.8);
}




footer {
	background-color: rgba(255,255,255,0.8);
	height: 1px;
  	margin-left:auto;
  	margin-right:auto;
	margin-top: -1px;
	width: 820px;
}

Viele Grüße

Johannes
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben