Einstellung der Höhe von DIV dynamisch

Question

In einer web-Anwendung habe ich eine Seite, die enthält ein DIV, das eine auto-Breite abhängig von der Breite des Browserfensters.

Ich brauche ein auto-Höhe für das Objekt.DIV startet etwa 300px von oben-Bildschirm, und es ist die Höhe, sollte es zu Strecken, um den unteren Rand des browser-Bildschirms.Ich habe einen max Höhe für das DIV-container, so würde es zu Mindest-Höhe für das div.Ich glaube, ich kann nur einschränken, die in CSS und Javascript verwenden, behandeln Sie die Größe der DIV.

Mein javascript ist nicht annähernd so gut, wie es sein sollte.Gibt es ein einfaches Skript, das ich schreiben könnte, würde das für mich tun?

Edit:Die DIV-Häuser, die ein Steuerelement, das tut es auf eigene overflow-handling (implementiert seine eigene scroll-bar).

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 von der aktuellen Abstand von der Spitze des Körpers bestimmt (in Fall Ihre 300px änderungen).

---

EDIT:Durch die Art und Weise, die Sie würde wollen zu nennen, das auf dieser div-jedes mal, wenn der Benutzer geändert, der browser-Größe, so würden Sie brauchen zu Draht up die event-handler für, dass, natürlich.

Answer 2

Was soll geschehen im Fall von überlauf?Wenn Sie es wollen, einfach auf den unteren Rand des Fensters verwenden Sie die absolute Positionierung:

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

Dies wird die DIV 30px in der von jeder Seite, 300px von oben auf den Bildschirm und bündig mit der Unterseite.Fügen Sie ein overflow:auto; um Fälle zu behandeln, wo der Inhalt größer ist als der div.

---

Edit:@Wer auch immer markiert, das nach unten, eine Erklärung wäre nett...Ist etwas falsch mit die Antwort?

Answer 3

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

Dies ist die sehr einfache JS-code erforderlich, um stellen Sie die Höhe Ihres Objekts dynamisch.Ich habe nur diese eine Sache, wo ich schon einige auto-height-Eigenschaft, aber wenn ich einige Inhalte via XMLHttpRequest Ich brauchte, um die Größe meiner übergeordneten div und diese Eigenschaft offsetheight hat den trick in IE6/7 und FF3

Answer 4

Die DIV-Häuser, die ein Steuerelement, das tut es auf eigene overflow handling.

Answer 5

Wenn ich verstehe, was Sie Fragen, das sollte den trick tun:

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use 
// window.innerWidth and window.innerHeight

var windowHeight;

if (typeof window.innerWidth != 'undefined')
{
    windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first 
// line in the document)
else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth != 'undefined' 
        && document.documentElement.clientWidth != 0)
{
    windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
    windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}

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

Answer 6

Mit kleinen Korrekturen:

function rearrange()
{
var windowHeight;

if (typeof window.innerWidth != 'undefined')
{
    windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first
// line in the document)
else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth != 'undefined'
        && document.documentElement.clientWidth != 0)
{
    windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
    windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}

document.getElementById("foobar").style.height = (windowHeight - document.getElementById("foobar").offsetTop  - 6)+ "px";
}

Answer 7

Einfachste, die ich gefunden habe...

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

Alles was Sie jetzt tun müssen ist, fügen Sie die resizableHeight Klasse alles, was Sie wollen autosize (für Eltern).

Answer 8

inspiriert von @jason-bunting, es ist das gleiche für entweder die Höhe oder die Breite:

function resizeElementDimension(element, doHeight) {
  dim = (doHeight ? 'Height' : 'Width')
  ref = (doHeight ? 'Top' : 'Left')

  var x = 0;
  var body = window.document.body;
  if(window['inner' + dim])
    x = window['inner' + dim]
  else if (body.parentElement['client' + dim])
    x = body.parentElement['client' + dim]
  else if (body && body['client' + dim])
    x = body['client' + dim]

  element.style[dim.toLowerCase()] = ((x - element['offset' + ref]) + "px");
}