✔ Content + Footer Scrollproblem

Chandini · 24. Februar 2006

Hallo zusammen,

folgendes Problem:
Meine Seite ist aufgeteilt in Header, Content und Footer.
Der Header soll fest oben auf der Seite immer sichtbar sein und nicht mitscrollen. Der Footer soll mitscrollen bzw. wenn nicht genug Inhalt zum Scrollen vorhanden ist, ganz unten auf der Seite positioniert sein.

Der Header bleibt wie gewünscht ganz oben auf der Seite.

Wenn ich nun nicht genug Inhalt zum Scrollen auf einer Seite habe, ist der Footer direkt unter dem Inhalt und nicht ganz unten auf der Seite.

Ist soviel Inhalt auf der Seite, dass gescrollt werden muss, stimmt die Darstellung auch nicht: Wenn man ganz nach unten scrollt, fehlen unten noch ca. 5-10 Zeilen vom Inhalt und der Footer.
Das Ende vom Scrollbalken ist auch nicht sichtbar.

Hier mal ein Link zur Seite:
Verwaister Link Footer

Hab schon verschiedene Möglichkeiten ausprobiert. Entweder kann gar nicht gescrollt werden oder der Header scrollt auch mit oder der Footer steht einfach mitten im Text. Hatte es auch schon mal soweit, dass es im Firefox geklappt hat, aber der IE hat dann nur noch Mist gemacht. Jetzt hab ich wenigstens überall den gleichen Fehler *g*

Hoffe, mir kann jemand weiterhelfen.

Viele Grüße,
Ines

[editpost by mod] Verwaisten Demo-Link entfernt.

U-Wasser-Gehaeuse · 24. Februar 2006

Vielleicht hilft dir das weiter.
http://www.tutorials.de/forum/css/235842-layout-problem.html

Chandini · 24. Februar 2006

So bleibt zwar der Footer ganz unten, allerdings scrollt jetzt auch der Header mit. Und das sollte nicht sein.

Der Header muss immer oben sichtbar sein, auch wenn man scrollt.
Der Footer soll halt immer am untersten Rand sein. Also wenn zu wenig Inhalt zum Scrollen da ist, dann soll er an den unteren Bildschirmrand und wenn genug Inhalt zum Scrollen da ist, soll er unter dem Inhalt positioniert sein.

Möglich sein muss es, dass der Footer das macht, was ich gern hätte.
So weit habe ich ihn jetzt auch schon.

Hier der Link zu der Seite mit wenig Text:
Verwaister Link - wenig Text

Und hier der Link zur gleichen Seite bloß mit mehr Text:
Verwaister Link - viel Text

Beim ersten Mal ist der Footer ganz unten und beim zweiten Mal scrollt er mit. Dummerweise auch der Header *grr*

Viele Grüße,
Ines

[editpost by mod] Verwaiste Demo-Links entfernt.

Maik · 24. Februar 2006

Vielleicht hilft Dir das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken weiter?

Chandini · 27. Februar 2006

Irgendwie krieg ich es nicht hin.

Ich lass es jetzt mal so, dass wenn nicht gescrollt werden kann, der Footer ganz unten ist und bei Scrollen bewegen sich halt Header und Footer mit.

Vielleicht kommt mir irgendwann noch ein Geistesblitz *g*

Viele Grüße,
Ines

Maik · 27. Februar 2006

Chandini hat gesagt.:
Der Footer soll halt immer am untersten Rand sein. Also wenn zu wenig Inhalt zum Scrollen da ist, dann soll er an den unteren Bildschirmrand und wenn genug Inhalt zum Scrollen da ist, soll er unter dem Inhalt positioniert sein.

Du wirst Dich für eine Variante entscheiden müssen:

Der Footer ist am unteren Browserfensterrand fest positioniert und kann nicht mitgescrollt werden.
Der Footer folgt nach dem Inhalt, befindet sich also am unteren Seitenende (nicht Browserfensterrand!) und kann mitgescrollt werden.

Chandini · 28. Februar 2006

michaelsinterface hat gesagt.:
Der Footer folgt nach dem Inhalt, befindet sich also am unteren Seitenende (nicht Browserfensterrand!) und kann mitgescrollt werden.

Aber jetzt hab ich es doch so, dass der Footer am unteren Browserfensterrand ist, wenn nichts zum Scrollen da ist und aber auch mitscrollt, wenn genug Inhalt zum Scrollen da ist.

Mir geht's ja jetzt nur noch darum, dass der Header fest da bleibt, wo er ist. Weil der scrollt immer noch fleißig mit.

Viele Grüße,
Ines

Maik · 28. Februar 2006

Dann zeig doch bitte mal den HTML- und CSS-Code der Seite.

Chandini · 28. Februar 2006

Hier der CSS-Code:

HTML:

  #page {
	height:100%;
	width:100%;
	margin: 0 auto;
	min-height:100%;
	position:relative;
  }

  #page[id] {
	height:auto;
	min-height:100%;
  }

  html {
	height:100%;
	margin:0;
	padding:0;
  }

  body {
	height:100%;
	margin:0;
	padding:0;
	font-family: Tahoma;
  }

  #content {
	position:relative;
	padding-bottom:70px;
	z-index: 100;
  }

  #header {
	position:relative;
	height:120px;
	z-index:200;
  }

  #footer {
	position:absolute;
	margin:0 auto;
	width:100%;
	clear:both;
	bottom:0px;
	height:50px;
	min-width:960px;
	background-color:#ccffff;
  }

Und hier der HTML-Code dazu:

HTML:

<div id="page">
  <div id="header">
	<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  	  <tr>
    	<td width="100%" height="17"></td>
  	  </tr>
  	  <tr>
    	<td width="600" height="82" valign="middle" bgcolor="#CCFFFF"><img src="images/fueller_hellgruen.jpg" alt="" width="560" height="1">
    	  <div id="positioner">
			<div class="menu">
			  <a class="outer" href="#">Home</a>
			  <a class="outer" href="#">Unternehmen
				<table class="first"><tr><td>
				  <a class="inner" href="#">&Uuml;ber LETZ</a>
				  <a class="inner" href="#">Anfahrt</a>
				  <a class="inner" href="#">Kontakt</a>
				  <a class="inner" href="#">Impressum</a>
				  <a class="inner" href="#">AGB</a>
				  <a class="inner" href="#">Referenzen</a>
				</td></tr></table>
			  </a>
			  <a class="outer" href="#">Portfolio
				<table class="first"><tr><td>
				  <a class="inner second" href="#">ERP-L&ouml;sungen >
					<table><tr><td>
					  <a class="innerthird" href="#">kleine Unternehmen</a>
					  <a class="innerthird" href="#">mittlere Unternehmen</a>
					  <a class="innerthird" href="#">Handwerk</a>
					  </td></tr></table>
				  </a>
				  <a class="inner second" href="#">Sicherheit >
					<table><tr><td>
					  <a class="innerthird" href="#">Boxprodukte</a>
					  <a class="innerthird" href="#">Enterprise Produkte</a>
					</td></tr></table>
				  </a>
				  <a class="inner" href="#">mobileData</a>
				  <a class="inner" href="#">Internet &amp; mehr</a>
				  <a class="inner" href="#">Webdesign</a>
				</td></tr></table>
			  </a>
			  <a class="outer" href="#">Aktuelles
				<table class="first"><tr><td>
				  <a class="inner" href="#">Angebote</a>
				  <a class="inner" href="#">Workshops</a>
				</td></tr></table>
			  </a>
			  <a class="outer" href="#">Service
				<table class="first"><tr><td>
				  <a class="inner" href="#">R&uuml;ckruf</a>
				  <a class="inner" href="#">Download</a>
				</td></tr></table>
			  </a>
			</div>

			<div id="noniemenu">
			  <div class="holder">
				<ul>
				  <li><a class="outer" href="#">Home</a></li>
				</ul>
			  </div>
			  <div class="holder">
				<ul>
				  <li><a class="outer" href="#">Unternehmen</a></li>
				  <li><a class="inner" href="#">&Uuml;ber LETZ</a></li>
				  <li><a class="inner" href="#">Anfahrt</a></li>
				  <li><a class="inner" href="#">Kontakt</a></li>
				  <li><a class="inner" href="#">Impressum</a></li>
				  <li><a class="inner" href="#">AGB</a></li>
				  <li><a class="inner" href="#">Referenzen</a></li>
				</ul>
			  </div>
			  <div class="holder">
				<ul>
				  <li><a class="outer" href="#">Portfolio</a></li>
				  <li><a class="inner second" href="#">ERP-L&ouml;sungen ></a>
					<ul id="a3">
					  <li><a class="innerthird" href="#">kleine Unternehmen</a></li>
					  <li><a class="innerthird" href="#">mittlere Unternehmen</a></li>
					  <li><a class="innerthird" href="#">Handwerk</a></li>
					</ul>
				  </li>
				  <li><a class="inner second" href="#">Sicherheit ></a>
					<ul id="a3">
					  <li><a class="innerthird" href="#">Boxprodukte</a></li>
					  <li><a class="innerthird" href="#">Enterprise Produkte</a></li>
					</ul>
				  </li>
				  <li><a class="inner" href="#">mobileData</a></li>
				  <li><a class="inner" href="#">Internet &amp; mehr</a></li>
				  <li><a class="inner" href="#">Webdesign</a></li>
				</ul>
			  </div>
			  <div class="holder">
				<ul>
				  <li><a class="outer" href="#">Aktuelles</a></li>
				  <li><a class="inner" href="#">Angebote</a></li>
				  <li><a class="inner" href="#">Workshops</a></li>
				</ul>
			  </div>
			  <div class="holder">
				<ul>
				  <li><a class="outer" href="#">Service</a></li>
				  <li><a class="inner" href="#">Rückruf</a></li>
				  <li><a class="inner" href="#">Download</a></li>
				</ul>
			  </div>
		  	</div>
		  </div>
	    </td>
  	  </tr>
  	  <tr>
    	<td width="61%">&nbsp;</td>
  	  </tr>
	</table>
  </div>
  <br>
  <div id="content">
	<table width="100%" border="0" cellpadding="0" cellspacing="0">
 	  <tr>
    	<td width="100%" valign="top"><img src="images/fueller_weiss.jpg" alt="" width="792" height="1">
	</td>
  	  </tr>
	</table> 
  </div>
  <div id="footer" class="normalgruen">
	<table width="100%" height="50">
	  <tr>
		<td height="1" width="210"><img src="images/fueller_hellgruen.jpg" alt="" width="205" height="1"></td>   
		<td width="100%" height="1"><img src="images/fueller_hellgruen.jpg" alt="" width="736" height="1"></td>
	  </tr>
	</table>
  </div>
</div>

Maik · 28. Februar 2006

Grundsätzlich wird ein DIV mit der CSS-Eigenschaft overflow:auto benötigt, um den überlangen Inhalt scrollen zu können. Darüber (ausserhalb) befindet sich dann der feststehende Header.

✔ Content + Footer Scrollproblem

Chandini

Mitglied

U-Wasser-Gehaeuse

Mitglied

Chandini

Mitglied

Maik

Chandini

Mitglied

Maik

Chandini

Mitglied

Maik

Chandini

Mitglied

Maik

Neue Beiträge