Mitscrollendes Footer

Beginner

Sunday, June 1st 2008, 10:56am

Hallo!
Ich habe mich hier angemeldet, in der Hoffnung das mir jemand helfen kann :-)
Auf meiner Site soll sich ein Balken in 100% iger Länge durchziehen und am Boden des Brwoserfensters sitzen. Er soll mit dem Content mitscrollen. dh dass dieser immer am Browserfensterende sitzt, egal wie lang der Content ist oder wie gross die Auflösung des Monitors.Der Balken muss sich also "mitscrollen". Ist das noch mit CSS möglich ohne JS verwenden zu müssen?? Und wie code ich das?! Ich brauche driiiiiiiingend HILFE bin bisschen aufgeschmissen :-(

Vielen Dank
JEN

darthdespotism

Professional

Posts: 483

2

Sunday, June 1st 2008, 12:43pm

Entweder du machst den Content in einen overflow:auto Container oder du setzt den footer mit position:fixed wobei letzteres die «richtige» Lösung wäre aber IMO mit IE < 7 probleme macht

diejen

Beginner

Posts: 2

3

Monday, June 2nd 2008, 12:57pm

Hallo Danke für die Antwort! Ich habe es mit div fixed gemacht aber beim ie funktioniert das scrollen nicht :-/ er scrollt mir dann nur den content und er soll aber die ganze seite an sich scrollen also das der scroller im grossen fenster ist. bei firefox läuft es optimal :-/ da noch ne idee? (kann mimr auch jmd sagen wieso mein schwarzer bg nicht komplett über den content geht? wenn ich den content scrolle fehlt der bg :-( also meine 100%tige höhe nimmt er nicht an. (s.code)

hier mal mein kompletter css code

Cascading Style Sheets

body { 	margin:0px;
		color:#FFFFFF;
		background-image:url(pix/bg_kreativ.jpg);
		padding:0 0 105px 0; 
		font-family:Verdana;
		height:100%;}
 
#container	{	position: absolute;
            	width: 1000px;
				height:100%;
            	top: 20px;
            	left: 50%;
            	margin-left: -500px;
				background-color:#000000;}
 
#main-navi-top {	position:absolute;
					margin-top:20px;
					margin-left:25px;
					display:inline;	
					height:45px;				
					}
 
#headerbereich {	position:absolute;
					margin:45px 0 0 0px;	
					height:200px;
					width:1000px;
					background-image:url(pix/head_kreativ.jpg);
					background-position:right;
					background-repeat:no-repeat;
					border-bottom:1px solid #ff6c00;
					border-top:1px solid #ff6c00;
					}
 
#main-navi-gruppe {	position:absolute;
					margin:35px 0px 0px 20px;
					display:inline;}
 
#headline {	position:absolute;
			margin-left:25px;
			margin-top:140px;
			width:340px;
			height:50px;
			background-image:url(pix/h_krea.gif); 
			background-repeat:no-repeat;
			font-size:11px;
			line-height:17px;
			}
 
#content {	position:absolute;
			margin:350px 25px 0px 25px;
			height:500px;
			text-align: justify;
			font-family:Verdana;
			font-size:11px;
			line-height:16px;
			left: -1px;
			top: -28px;
			}
#spalte1 {float:left; width:300px; margin-right:25px;}
#spalte2 {float:left; width:300px; margin-right:25px;}
#spalte3 {float:left; width:300px;}
 
div#footer { 	position:absolute;  
				bottom:0;  
				left:0;  
				width:100%;  
				height:59px; 
				background-image:url(pix/bottom_bg.gif);
				}
 
@media screen{ body>div#footer{   position: fixed;  } }
 
* html body {  overflow:hidden; } 
 
* html div#content{  height:100%;  overflow:auto; } 
 
/*
	LINK 	
*/					
a { font-family:Verdana;
	font-size:11px; 
	font-weight:bold; 
	color:#e1dbd6; 
	text-decoration:none; 	
	margin-right:30px;}
 
a:hover {	color:#FF6600;}
 
a.topmenue {	font-family:Verdana; 
				font-size:11px; 
				font-weight:bold; 
				text-transform:uppercase; 
				color:#e1dbd6; 
				text-decoration:none; 	
				margin-right:30px;	/*border:1px solid red;*/	}
 
a.topmenue:hover {	color:#000000;	background-color: #ff6c00;}
 
img {border:none; margin-right:-30px}
 
.subnavi {	 position:absolute;
			margin-top:210px;
			margin-left:25px;
			}

Torben Brodt

Administrator

Posts: 8,454

4

Monday, June 2nd 2008, 5:30pm

Wegen den 100% schau dir mal diese Seite an: http://xhtmlwiki.de/Seite_auf_100%25_H%C3%B6he

position:fixed für Internet Explorer 6 implementierst du so: http://de.selfhtml.org/css/layouts/fixbe….htm#fixiert_ie

HTML Code

<!--[if lt IE 7]>
<style type="text/css">
  @media screen {
    html, body {
      height: 100%; overflow-y: hidden;
    }
    #Scrollbereich {
      height: 100%; width: 100%; overflow: auto;
    }
    #Inhalt {
      position: static;
    }
  }
</style><![endif]-->

Quoted

Zunächst wird für den Anzeigebereich eine Höhe von 100% definiert und über die erst für CSS 3 vorgesehene Eigenschaft overflow-y:hidden ein (doppelter) vertikaler Scrollbalken verhindert. Im HTML-Quelltext wurden die zu scrollenden Elemente bereits in einem div#Scrollbereich gruppiert, das nun den gesamten Anzeigebereich ausfüllen soll und über overflow:auto die Scrollfunktion übernimmt. Der hierin enthaltene Inhaltsbereich ist explizit position:static zu definieren, auch wenn dies eigentlich dem Initialisierungswert entspricht.
Das div#fixiert mit der Navigation ist im HTML-Quelltext außerhalb des nun scrollbaren Elementes notiert und (für den Internet Explorer bis zur Version 6) bereits absolut positioniert, wodurch es vom Scrollen ausgeschlossen wird und auf diese alternative Weise am Bildschirm fixiert ist.