Tengo un div en mi sitio web que debe ser el alto de la ventana. Esto es lo que tengo:Cómo cambiar la altura div en el tamaño de la ventana?
$(document).ready(function() {
var bodyheight = $(document).height();
$("#sidebar").height(bodyheight);
});
Sin embargo, eso no cambia automáticamente cuando se cambia el tamaño de la ventana? ¿Sabe alguien cómo arreglar esto?
Gracias
También es necesario hacer eso en resize caso, intente lo siguiente:
$(document).ready(function() {
$(window).resize(function() {
var bodyheight = $(this).height();
$("#sidebar").height(bodyheight);
}).resize();
});
Creo que el mundo sería un mejor lugar si esta solución fuera editado para que las llamadas 'ready' y' resize' compartan una sola función, en lugar de usar código duplicado. La gente tiende a copiar y pegar código de JavaScript bastante ciegamente: ¿por qué no mostrarles las mejores prácticas? – aaaidan
+1 para el evento de cambio de tamaño. Estaba teniendo un problema similar y esto me ayudó mucho. Seguiré el consejo de aaaidan y lo lanzaré en una sola función. – Crackertastic
En el controlador de cambio de tamaño no puede usar el nodo '$ (documento)'. Sugiero usar el selector '$ (this)' ya que esto se está cambiando de tamaño. – bioffe
utilizar el evento resize.
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) .ready –
Además de lo que han dicho asegúrese de extraer el código de controlador de eventos en una función separada y desde el cual lo ready y resize controladores de eventos. De esta forma, si agrega más código o necesita vincularlo a otros eventos, solo tendrá un lugar donde cambiar la lógica del código.
Lo que también debe hacer en ese caso es asegurarse de establecer la altura en el lugar correcto. No se equivoque, lo hice una vez, y establezca la altura de los dos div que componen mi página, luego configure el ancho de una de las columnas, lo que cambia la altura, lo que da como resultado una situación de desbordamiento. –
Algunas aclaraciones sobre esto, para que la ventana cambie el tamaño correctamente después de cada devolución de llamada, debe aclarar qué altura desea 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 importa cómo cambie el tamaño de la ventana. Esto tomará el alto de la ventana actual.
sólo para mostrar el DRY-up se sugiere en el comentario de 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 se podía hacer con CSS más simple. Pero si hubiera un cálculo involucrado, esa 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 fudgefactor.
$(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 doctype HTML5 en el archivo HTML. Disminuir el tamaño de la ventana no funciona con estos métodos a menos que agregue esto al principio del archivo HTML: '' – Bobort
$(document).ready(function()
{
$(window).on("resize",function() {
var bodyheight = $(document).height();
$("#sidebar").height(bodyheight);
});
});
¿Hay alguna razón específica por la cual no se puede hacer frente a este problema con CSS? Las soluciones de JS serían, en el mejor de los casos, disparejas en "algunos" navegadores (no es necesario nombrar a la bestia, supongo) ... –
https://jsfiddle.net/53hoq9w7/ – Pierre