Einstellen der Höhe eines DIV dynamisch

Question

In einer Webanwendung habe ich eine Seite, die ein DIV enthält, das je nach Breite des Browserfensters automatisch angepasst wird.

Ich brauche eine automatische Höhe für das Objekt. Das DIV beginnt ungefähr 300px vom oberen Bildschirmrand entfernt, und seine Höhe sollte bis zum unteren Rand des Browserfensters reichen. Ich habe eine maximale Höhe für das Container-DIV, daher müsste es eine minimale Höhe für das DIV geben. Ich glaube, ich kann das einfach in CSS einschränken und Javascript verwenden, um die Größenänderung des DIV zu steuern.

Mein Javascript ist bei weitem nicht so gut, wie es sein sollte. Gibt es ein einfaches Skript, das ich schreiben könnte, das dies für mich erledigt?

Bearbeiten: Das DIV beherbergt eine Steuerung, die ihre eigene Überlaufbehandlung durchführt (implementiert ihre eigene Scrollleiste).

Answer 1

Versuchen Sie diese einfache, spezifische Funktion:

function resizeElementHeight(element) {
  var height = 0;
  var body = window.document.body;
  if (window.innerHeight) {
      height = window.innerHeight;
  } else if (body.parentElement.clientHeight) {
      height = body.parentElement.clientHeight;
  } else if (body && body.clientHeight) {
      height = body.clientHeight;
  }
  element.style.height = ((height - element.offsetTop) + "px");
}

Es hängt nicht davon ab, wie weit vom oberen Rand des Body entfernt ist (falls Ihre 300px sich ändern).

---

EDIT: Übrigens, Sie möchten diese Funktion jedes Mal aufrufen, wenn der Benutzer die Größe des Browsers ändert, also müssten Sie natürlich den Event-Handler dafür verknüpfen.

Answer 2

Was soll im Falle eines Überlaufs passieren? Wenn Sie möchten, dass es einfach bis zum unteren Rand des Fensters gelangt, verwenden Sie absolute Positionierung:

div {
  position: absolute;
  top: 300px;
  bottom: 0px;
  left: 30px;
  right: 30px;
}

Dadurch wird das DIV jeweils 30px von jeder Seite entfernt, 300px vom oberen Bildschirmrand entfernt und bündig mit dem unteren Rand. Fügen Sie ein overflow:auto; hinzu, um Fälle zu behandeln, in denen der Inhalt größer ist als das DIV.

---

Bearbeitet: @Wer auch immer dies heruntergevotet hat, eine Erklärung wäre nett... Ist etwas mit der Antwort nicht in Ordnung?

Answer 3

document.getElementById('myDiv').style.height = "500px";

Wenn Sie eine dynamische Höhe haben, können Sie height + 'px' verwenden

Dies ist der sehr grundlegende JS-Code, der erforderlich ist, um die Höhe Ihres Objekts dynamisch anzupassen. Gerade habe ich genau das gemacht, wo ich einige Eigenschaften der automatischen Höhe hatte, aber als ich über XMLHttpRequest etwas Inhalt hinzugefügt habe. Ich musste das Elterndiv neu dimensionieren und diese offsetheight Eigenschaft in IE6/7 und FF3 hat den Trick gemacht.

Answer 4

Einfachstes, was ich machen konnte...

function resizeResizeableHeight() {
    $('.resizableHeight').each( function() {
        $(this).outerHeight( $(this).parent().height() - ( $(this).offset().top - ( $(this).parent().offset().top + parseInt( $(this).parent().css('padding-top') ) ) ) )
    });
}

Jetzt musst du nur die resizableHeight-Klasse zu allem hinzufügen, was du automatisch anpassen möchtest (an sein Elternelement).

Answer 5

Wenn ich verstehe, was Sie fragen, sollte das funktionieren:

// die standardskonformen Browser (mozilla/netscape/opera/IE7) verwenden 
// window.innerWidth und window.innerHeight

var windowHeight;

if (typeof window.innerWidth != 'undefined')
{
    windowHeight = window.innerHeight;
}
// IE6 im standardskonformen Modus (d.h. mit einem gültigen Doctype als erstes 
// in dem Dokument)
else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth != 'undefined' 
        && document.documentElement.clientWidth != 0)
{
    windowHeight = document.documentElement.clientHeight;
}
// ältere Versionen von IE
else
{
    windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}

document.getElementById("yourDiv").height = windowHeight - 300 + "px";