¿Cómo cambiar div de altura en el cambio de tamaño de la ventana?

3 minutos de lectura

Tengo un div en mi sitio web que debería ser la altura de la ventana. Esto es lo que conseguí:

    $(document).ready(function() {
    var bodyheight = $(document).height();
    $("#sidebar").height(bodyheight);
});

Sin embargo, ¿no cambia automáticamente cuando se cambia el tamaño de la ventana? ¿Sabe alguien cómo arreglar esto?

Gracias

  • ¿Hay alguna razón específica por la que no puedas solucionar este problema con CSS? Las soluciones JS serían, en el mejor de los casos, entrecortadas en “algunos” navegadores (supongo que no es necesario nombrar a la bestia) …

    – El poderoso patito de goma

    09 oct.

  • jsfiddle.net/53hoq9w7

    – Pedro

    10 jul.

¿Como cambiar div de altura en el cambio de tamano
Sarfraz

También tienes que hacer eso en resize evento, prueba esto:

$(document).ready(function() {
    $(window).resize(function() {
        var bodyheight = $(this).height();
        $("#sidebar").height(bodyheight);
    }).resize();
});

  • Creo que el mundo sería un lugar mejor si esta solución se editara para que el ready y resize las llamadas compartían una sola función, en lugar de usar un código duplicado. La gente tiende a copiar y pegar el código javascript a ciegas: ¿por qué no mostrarles las mejores prácticas?

    – aaidan

    06 dic. 12 a las 1:23


  • +1 para el evento de cambio de tamaño. Estaba teniendo un problema similar y esto ayudó muy bien. Sin embargo, seguiré el consejo de aaidan y incluiré esto en una sola función.

    – Crackertástico

    23 sep.

  • En el controlador de cambio de tamaño no se puede utilizar $(document) nodo. Yo sugeriría usar $(this) selector ya que esto está siendo redimensionado.

    – bioffe

    28 jul. 14 a las 20:08

Solo para mostrar el DRY-up sugerido en el comentario sobre la respuesta aceptada:

$(document).ready(function() {
  body_sizer();
  $(window).resize(body_sizer);
});
function body_sizer() {
  var bodyheight = $(window).height();
  $("#sidebar").height(bodyheight);
}

Y, por supuesto, esto es un poco tonto, ya que es algo que podría hacerse con CSS de forma más sencilla. Pero si hubiera un cálculo involucrado, sería una historia diferente. Por ejemplo, este ejemplo que hace que un div llene la parte inferior de la ventana, menos un pequeño factor de fudge.

$(function(){
  resize_main_pane();
  $(window).resize(resize_main_pane);
});
function resize_main_pane() {
  var offset = $('#main_scroller').offset(),
  remaining_height = parseInt($(window).height() - offset.top - 50);
  $('#main_scroller').height(remaining_height);
}

  • Asegúrese de tener el tipo de documento HTML5 en el archivo HTML. La disminución del tamaño de la ventana no funciona con estos métodos a menos que agregue esto en la parte superior del archivo HTML: <!doctype html>

    -Bobort

    21 jul.


Algunas aclaraciones sobre esto, para que la ventana cambie de tamaño correctamente después de cada devolución de llamada, debe aclarar qué altura recuperar.

    $(document).ready(function() {
       $(window).resize(function() {
          var bodyheight = $(window).height();
          $("#sidebar").height(bodyheight);
       }); 
    });

De lo contrario, según mi experiencia, la altura seguirá aumentando ahora sin importar cómo cambie el tamaño de la ventana. Esto tomará la altura de la ventana actual.

Además de lo que otros han dicho, asegúrese de extraer el código del controlador de eventos en una función separada y llamarlo desde ready y resize manejadores de eventos De esa manera, si agrega más código o necesita vincularlo a otros eventos, solo tendrá un lugar donde cambiar la lógica del código.

Utilizar el resize evento.

Esto debería funcionar:

 $(document).ready(function() {
   $(window).resize(function() {
    var bodyheight = $(document).height();
    $("#sidebar").height(bodyheight);
}); });

  • No necesita el controlador de eventos de cambio de tamaño dentro de su $ (documento). Listo

    – Ken Ray

    3 mayo 2010 a las 18:18

¿Como cambiar div de altura en el cambio de tamano
Dan

$(document).ready(function() 
{

     $(window).on("resize",function() {

          var bodyheight = $(document).height();

          $("#sidebar").height(bodyheight);
     });

});

  • No necesita el controlador de eventos de cambio de tamaño dentro de su $ (documento). Listo

    – Ken Ray

    3 mayo 2010 a las 18:18

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad