Kleine CSS-Frage

PseudoPsycho · 07/21/2012, 20:20

Wahrscheinlich total einfach und ich habe gerade ein Brett vorm Kopf

Ich versuche etwas in der Art zu erreichen:

HTML Code:

<body>
<div style="height:100%;">
<div style="100px;">Div 1</div>
<div style="50px;">Div 2</div>
<div style="{restliche Höhe}">Div 3</div>
<div style="100px;">Div 4</div>
</div>
</body>

Das ist jetzt einfach mal 'n Schema, der echte Code wäre an dieser Stelle überflüssig.
Also, alle Divs sollen relativ positioniert sein und ich will auch keine JS-Lösung (das kann ich ja selber

).
Danke.

マルコ · 07/21/2012, 20:54

Div 4 klebt immer am Boden. Also positioniere es doch absolut innerhalb des relativ positionierten Divs.
Das Div 3 hat dann zwar immer nur die Höhe des Inhalts, aber damit sollte es gehen.
Wenn du dann noch margin-bottom auf 100px setzt, dann rutscht das Div 4, wenn Div 3 zu lang wird, einfrach mit weiter runter, ohne dass du Probleme hast.

PseudoPsycho · 07/21/2012, 21:12

Naja, problematisch wird's dadurch, dass Div 3 ein Hintergrundbild besitzt, was auf der freien Seite zu sehen sein soll und Div 4 einen transparenten Hintergrund hat (durch den das Bild nicht durchscheinen soll). So ähnliche Ideen hatte ich auch schon.
Oder hab' ich dich falsch verstanden? Wenn ja, wär 'n kleines Code-Beispiel praktisch ^^

マルコ · 07/21/2012, 22:12

Nein, ich glaub, du hast mich richtig verstanden. Hmm, mir fällt grad ein, wenn du Div 3 100% hoch machst, zusätzlich zu den von mir vorgeschlagenen Änderungen, dann dürfte das Problem gelöst sein. Hab ich jetzt natürlich nicht getestet, aber ich denke, so geht es. Auch mit dem Hintergrundbild (wegen dem margin-bottom).

PseudoPsycho · 07/22/2012, 00:59

Nunja, bei 100% übernimmt der DIV-Container die Höhe des Elternelements, in diesem Fall also die Fensterhöhe. Werden die anderen Elemente (und margin) mit px-Angaben addiert, so ist die Seite auf einmal deutlich größer, als gewollt.

Anders könnte man natürlich DIV 3 eine Höhe von 100% zuweisen und alle anderen Elemente mittels position:absolute; darüberlegen. Den Abstand regelt man dann mit padding und box-sizing:border-box;. Problem wäre hierbei, dass eben der Hintergrund von Div 3 durch Div 4 hindurchscheint.

Steckdose9000 · 07/22/2012, 17:48

Hmm, was willst Du denn GENAU machen?

PseudoPsycho · 07/22/2012, 18:32

Ich versuche quasi:

HTML Code:

var div3=document.getElementsByTagName('div')[3], // Div 3
others=250; // Höhe der anderen Elemente in px
div3.style.minHeight=(window.height-others)+'px';

als CSS hinzukriegen, statt als JS.