Ajuste de la altura de un DIV de forma dinámica

Question

En una aplicación web, tengo una página que contiene un DIV que tiene un auto de ancho dependiendo de la anchura de la ventana del navegador.

Necesito un auto-altura del objeto.El DIV se inicia acerca de 300px de la parte superior de la pantalla, y su altura debe hacer es estirar la parte inferior de la pantalla del navegador.Tengo una altura máxima para el DIV contenedor, por lo que no tendría que ser como mínimo de altura para la div.Creo que me puede restringir que en CSS, y el uso de Javascript para controlar el cambio de tamaño de la DIV.

Mi javascript no es tan buena como debería ser.Hay un sencillo script que yo podía escribir que hacer esto por mí?

Editar:El DIV casas de un control que no es el propio control de desbordamiento (implementa su propia barra de desplazamiento).

Answer 1

Pruebe este sencillo, función específica:

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");
}

No depende de la distancia desde la parte superior del cuerpo está especificado (en caso de que su 300px cambios).

---

EDITAR:Por cierto, usted desea llamar a este en que div cada vez que el usuario ha cambiado el navegador del tamaño, por lo que tendría que conectar el controlador de eventos para eso, por supuesto.

Answer 2

Lo que debe suceder en el caso de desbordamiento?Si quieres que acaba de llegar a la parte inferior de la ventana, utilice el posicionamiento absoluto:

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

Esto pone a la DIV 30px de cada lado, 300px de la parte superior de la pantalla, y al ras con la parte inferior.Añadir un overflow:auto; para manejar los casos donde el contenido es mayor que el div.

---

Editar:@Quien marcó esta abajo, una explicación sería agradable...Algo está mal con la respuesta?

Answer 3

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

Esto es muy básico, el código JS necesarios para ajustar la altura de su objeto de forma dinámica.Acabo de hacer esta cosa donde había algunos automático de altura de la propiedad, pero cuando voy a agregar algo de contenido a través de XMLHttpRequest Necesitaba cambiar el tamaño de mi div padre y este offsetheight propiedad hizo el truco en IE6/7 y FF3

Answer 4

El DIV casas de un control que no es el propio control de desbordamiento.

Answer 5

Si entiendo lo que estás preguntando, este debe hacer el truco:

// 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

Con correcciones menores:

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

Más simple que se me ocurrió...

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

Ahora todo lo que tienes que hacer es añadir el resizableHeight clase de todo lo que quiere autosize (a su padre).

Answer 8

inspirado por @jason-bunting, lo mismo con la altura o anchura:

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");
}