✔ Position absolute overflow ie ff chrome...

J

JesusFreak777

Erfahrenes Mitglied
Hi Leute,

ich hab da nen Denkfehler gebaut ^^, es sicherlich kein großes Problem, aber ich bekomms nicht hin :/

mein Style
CSS: 
	body {
		margin: 0px;
		padding: 0px; 
	}

	.head {
		border: 1px solid #f39; 
		position: absolute; 
		top: 0px; height: 30px; 
		width: 99%;
	}

	.foot {
		border: 1px solid #9f3; 
		position: absolute; 
		bottom: 0px; 
		height: 30px; 
		width: 99%;  
	}

	.main {
		border: 1px solid #39f; 
		position: absolute; 
		top: 30px; 
		bottom: 30px; 
		width: 99%; 
		overflow: auto;
	}

und meine HTML

HTML: 
<div class='head'></div>
<div class='foot'></div>

<div class='main'>
	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>
	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>
	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>
	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>
	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>
	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>
	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>
	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>
	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>	viel text <br>
</div>

Ziel -> oben ein Balken (für ein Menü) und unten ne Fußzeile (auch für ein Menü) in der Mitte ein Contentbereich! Die Menüs sollten angeschweißt sein! Egal wie viel Text in der Mitte ist oder was auch immer, oben Kopfzeile immer Sichtbar unten Fußzeile immer Sichtbar beides fest Positioniert! Sobald mehr text kommt, erscheint in der Mitte (rechts neben dem Content) ein Scrollbalken und ...

Das funktioniert auch alles nur im IE leider nicht :/ da schaut es auch erst ganz ok aus! aber beim scrollen verschiebt sich die Komplette Seite!

habt ihr ne Idee für mich?

Viele Dank
 
Der Fehler ist im IE9 (aber ich denke nicht das der IE9 der einzigste ist)!

als Doctype hab ich:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ich bin aber schon einen Schritt weiter! Der IE (9) kommt nicht damit zurecht das ich die höhe Positionsbedingt mache! Also -> Position: absolut; top: 30px; bottom: 30px; ! wenn ich das "Bottom" weg lasse und eine feste höhe eingebe, funktioniert es auch im IE wie gewollt!

Dann funktioniert aber meine Seite nicht mehr wie gewollt!

Jemand eine Idee?
 
Zuletzt bearbeitet:
Danke :)

die Seite hat geholfen...

meine neue css

CSS: 
	body {
		margin: 0px;
		padding: 0px; 
		overflow: hidden; 
		padding: 30px 0 30px 0; 
	}
	
	html #main {
		height:100%; 
		width:100%; 
	}
  
	.head {
		border: 1px solid #f39; 
		position: absolute; 
		top: 0px; height: 30px; 
		width: 99%;
	}
	
	.foot {
		border: 1px solid #9f3; 
		position: absolute; 
		bottom: 0px; 
		height: 30px; 
		width: 99%;  
	}
	
	#main {
		border: 1px solid #39f; 
		position:fixed; 
		top:30px;
		left:0;
		bottom:30px; 
		right:0; 
		overflow:auto; 
	}
 
Schön wenn's klappt. Dein Doctype ist unvollständig.
Dieser -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">- ohne URL versetzt die Browser in den Quirks-Modus.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück