Höhe eines divs mit JavaScript anpassen

[molily]

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