nicht angemeldet
Höhe eines divs mit JavaScript anpassen
Hallo zusammen,
ich habe hier ein Layoutproblem, das ich mit CSS allein nicht lösen kann - leider kann ich aber so gut wie kein Javascript, deshalb wäre es echt nett, wenn mir jemand weiterhelfen könnte...
Also folgendes:
Ich habe ein div ("grossesdiv") mit Höhenangabe in Prozent. Darin ist unter anderem ein weiteres div ("kleinesdiv"), dass nach oben hin einen festen Abstand von 200 px hat. Die Höhe soll automatisch angepasst werden, so dass es genau mit dem grossen div abschließt. Ich bräuchte also sowas wie "height: 100% - 200px", was ja leider mit CSS nicht geht.
<html>
<head>
<style type="text/css">
html, body { height: 100%;}
div.grossesdiv {background: red; margin: auto; height: 80%; width: 400px;}
div.kleinesdiv {background: black; margin-top: 200px; margin-left: 200px; width: 100px; height: (100% - 200px); }
</style>
</head>
<body>
<div class="grossesdiv">
<div class="irgendeindiv"> </div>
<div class="kleinesdiv"> </div>
</div>
</body>
</html>
-
Hi,
Ich habe ein div ("grossesdiv") mit Höhenangabe in Prozent. Darin ist unter anderem ein weiteres div ("kleinesdiv"), dass nach oben hin einen festen Abstand von 200 px hat. Die Höhe soll automatisch angepasst werden, so dass es genau mit dem grossen div abschließt. Ich bräuchte also sowas wie "height: 100% - 200px", was ja leider mit CSS nicht geht.
Die Maße eines absolut positionierten Elements aus den Angaben zweier gegenüberliegender "Koordinaten" (hier also top und bottom) herleiten zu lassen, geht in aktuellen Browsern (also nicht IE <=6) durchaus - ob das eine brauchbare Möglichkeit wäre, hängt davon ab, was du damit vorhast.
Ansonsten kannst du per JavaScript die effektive Höhe eines Elements über die offsetHeight-Eigenschaft ermitteln und über das style-Objekt dann bei einem anderen Element die Höhe wie gewünscht setzen.
Das bewirkt so ohne weiteres aber keine "Dynamik", falls sich die Elementhöhe ändert, bspw. dadurch dass der Nutzer die Schriftgrösse ändert.MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak. -
Hallo,
Wenn du IDs verwendest, sind sie in JavaScript besser ansprechbar.
window.onload = function () { document.getElementById("kleinesdiv").style.height = (document.getElementById("grossesdiv").offsetHeight - 200) + "px"; };Bedeutet: Nach dem Laden der Seite lese die Höhe vom großen Div aus, substrahiere 200 und weise sie der Höhe des kleinen Divs zu.
window.onload ist hier nur eine Möglichkeit, wenn du andere Scripte verwendest, ist die Wahrscheinlichkeit hoch, dass window.onload schon »belegt« ist.
Beim obigen Script wird #kleinesdiv aber immer noch *unter* dem restlichen Inhalt (#irgendeindiv) dargestellt und ragt daher aus dem #grossesdiv heraus. Zumindest, solange du ein margin-top setzt.
Du könntest zur Abhilfe:
-
margin-top herauswerfen und dem #irgendeindiv { height: 200px; } zuweisen.
-
Das JavaScript variabler machen und die Höhe vom #irgendeindiv von der Gesamhöhe von #grossesdiv abziehen. Das ginge auch mit offsetHeight.
document.getElementById("kleinesdiv").style.height = (document.getElementById("grossesdiv").offsetHeight - document.getElementById("grossesdiv").offsetHeight) + "px";- andere Lösungen wären auch denkbar, das müsstest du entscheiden, was für dich am einfachsten ist.
Mathias
-
-
Hallo Mathias, hallo Chris,
vielen Dank für eure Hilfe! Die Lösung mit der offsetHeight des grossen div hat geklappt.
Das margin-top hab ich jetzt auch rausgeworfen. Wenn man die Seite lädt, sieht schon alles genau so aus, wie ich es wollte.
Jetzt hab ich nur noch das Problem, dass sich die Höhe anpassen soll, wenn man das Browserfester größer oder kleiner zieht. Gibts hierfür eine Alternative zu window.onload, die die Höhe des kleinen divs dynamisch aktualisiert?Viele Grüße
Caro-
Jetzt hab ich nur noch das Problem, dass sich die Höhe anpassen soll, wenn man das Browserfester größer oder kleiner zieht. Gibts hierfür eine Alternative zu window.onload, die die Höhe des kleinen divs dynamisch aktualisiert?
Das ginge über das resize-Ereignis, konkret window.onresize. In dem Fall wird die Anpassung einfach erneut aufgerufen. Also registriert man die Handler-Funktion einfach für beide Ereignisse, load und resize:
window.onload = window.onresize = function () {...};Aber du solltest auch die von ChrisB aufgezeigte reine CSS-Lösung probieren:
<!doctype html> <style> [code lang=css]html, body { margin: 0; padding: 0; height: 100%; } #c { position: relative; width: 50%; height: 80%; background-color: blue; } #a { background-color: yellow; } #b { position: absolute; top: 200px; bottom: 0; width: 100%; background-color: red; }</style>
<div id="c">
<div id="a">aaa</div>
<div id="b">bbb</div>
</div>[/code]Mathias
-
Hallo Mathias,
super vielen Dank!! Beide Lösungen klappen - ich denk ich werd mich für die absolute Positionierung entscheiden, weils noch einfacher ist...
Viele Grüße
Caro
-
-