Div 100%-X Höhe Problem, ohne absolute Positionierung

xblax · #1 (**permalink**) 15.10.2010, 00:22

Also ich habe folgendes Problem: Ich habe eine gewisse Vorstellung wie das Layout aussehen soll, aber bekomme es nicht hin. Ich habe mal 2 Skizzen gemacht:

http://img832.imageshack.us/img832/495/beispiel1.png
http://img841.imageshack.us/img841/1618/beispiel2e.png

Wie ihr seht möchte ich ein Div haben, welches immer die volle Höhe des Viewports einnehmen soll, allerdings oben und unten einen Rand hat. Wenn der Inhalt größer als der Viewport wird soll es wachsen. Und das ist der Punkt an dem ich scheitere. Wenn ich es absolut positioniere und den Abstand zu den Rändern angebe, dann behält es seine fixe größe, auch overflow:visible hilft da nicht.

Wie ich die Links dann unten anheften kann weiß ich auch noch nicht, aber erstmal will ich das eigentliche Problem lösen ...

Die Scrollbar sollte auf jeden Fall am Rand des Bildschirms bleiben.
Am Besten wäre eine Lösung die mit den aktuellen Browsern kompatibel ist und mit IE 6 wenigstens Nutzbar ...

Vielleicht habt ihr eine Idee.

//Edit:
Mittlerweile bin ich etwas weiter. Das div an sich kann ich erstmal erzeugen in dem ich hinter den Content ein weiteres div lege, welches absolut positioniert ist und den Hintergrund erzeugt. Den Footer bekomme ich aber nicht an die richtige stelle. Die Footer Stick Alt Anleitung aus den FAQ bekomme ich hier nicht angewendet, weil das dann eine Scrollbar erzeugt ...

Vielleicht kann mir jemand weiterhelfen wenn er mir sagt warum

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	   
<html>
<head>
	<style type="text/css">
		html {height:100%; width:100%; margin:0px; padding:0px;}
		body {height:100%; width:100%; margin:0px; padding:0px; }
	</style>
</head>
<body>

		<div style="margin:50px;">test</div>
	
</body>
</html>

eine Scrollbar erzeugt und das nicht:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	   
<html>
<head>
	<style type="text/css">
		html {height:100%; width:100%; margin:0px; padding:0px;}
		body {height:100%; width:100%; margin:0px; padding:0px; }
	</style>
</head>
<body>

		<div>test</div>
	
</body>
</html>

Versteh ich nicht. Einziger unterschied ist margin vom div und das müsste sich doch anpassen, oder?

Gruß,
xblax

andir · #2 (**permalink**) 15.10.2010, 10:34

Ein Blick in die Faq kann Dir vielleicht helfen:

[FAQ]http://xhtmlforum.de/40267-faq-h-ufig-gestellte-fragen-und.html[/FAQ]
( Nr. 4)

xblax · #3 (**permalink**) 15.10.2010, 17:10

Hab ich ja im Prinzip geschrieben, dass das nicht funktioniert.
Problem ist das was ich oben im Edit geschrieben habe. Sobald ich dem HTML Element 100% Höhe zuweise und ein div mit margin habe gibt es eine Scrollbar.

hubspe · #4 (**permalink**) 15.10.2010, 17:20

Zitat:

Zitat von xblax

Hab ich ja im Prinzip geschrieben, dass das nicht funktioniert.
Problem ist das was ich oben im Edit geschrieben habe. Sobald ich dem HTML Element 100% Höhe zuweise und ein div mit margin habe gibt es eine Scrollbar.

dann mach einen div#fuss-innen und einen div#kopp-innen und gib denen einen unteren bzw oberen margin.
Bei #fuss u. #kopp wird hg-farbe auf transparent gesetzt, dann scheint die HG-Farbe von body durch,
wenn nicht ein umschl Element noch ne Hg-Farbe hat.
Evlt. wg. Collapsing Margins aufpassen.

xblax · #5 (**permalink**) 27.10.2010, 20:20

Ok ich bin mittlerweile etwas weiter mit der ganzen Sache. Das ganze könnt ihr erstmal hier anschauen (grässliche Farben und Muster dienen nur der Veranschaulichung ...):

wenig Inhalt: http://www.csstestseite.tk/test1.html
viel Inhalt: http://www.csstestseite.tk/test2.html

Problem: ich möchte einen Halbtransparenten Hintergrund für den Content haben. Mit einer einfachen Farbe wäre alles kein Problem. Schaut euch am Besten mal die Beispiele und den Code dazu an, dann solltet ihr schnell sehen woran es liegt.

Vielleicht hat ja einer eine Lösung wie man das hinbekommen könnte.

Was ich außerdem noch nicht verstehe: wenn ich bei #padding_container statt padding margin einsetze entsteht eine Scrollbar.

Gruß,
xblax

Manfred62 · #6 (**permalink**) 27.10.2010, 20:31

Zitat:

Zitat von xblax

Was ich außerdem noch nicht verstehe: wenn ich bei #padding_container statt padding margin einsetze entsteht eine Scrollbar.

Soweit ich mich erinnere, darf man bei "Sticky Footer" Lösungen keine vertikalen margins verwenden.

Gruß Manfred

xblax · #7 (**permalink**) 27.10.2010, 20:36

Zitat:

Zitat von Manfred62

Soweit ich mich erinnere, darf man bei "Sticky Footer" Lösungen keine vertikalen margins verwenden.

Gruß Manfred

Hab ich ja soweit auch festgestellt. Die Frage ist allerdings warum. Ist das ein Renderingfehler? Momentan geht es ja auch mit padding, allerdings könnte sich das bei der weiteren Ausgestaltung des Layouts noch als Problem erweisen.

Das andere Problem ist allerdings noch wichtiger.

fricca · #8 (**permalink**) 27.10.2010, 20:45

Nein, kein Fehler. Collapsing Margins -- das Stichwort wurde oben bereits genannt. Die Suchfunktion weiß viel dazu.

xblax · #9 (**permalink**) 28.10.2010, 01:02

Ok hast recht, hab mich jetzt nochmal etwas damit beschäftigt und es auch verstanden. Allerdings etwas blöd, dass es nicht weiter konfigurier bar ist ...

Das Problem mit dem halbtransparentem Hintergrund hab ich aber immer noch. Irgendeine Lösung muss es doch geben das hin zu bekommen

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
DIV: Ausfüllen restlicher Höhe bei weiterem DIV mit fixer Höhe	danoman	CSS	5	24.04.2011 18:38
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Problem mit einem 3D-Effekt	moep0710	CSS	12	12.06.2010 14:30
Problem mit div und Höhe	deep4	CSS	2	13.11.2007 20:03