¿Cómo puedo encontrar fácilmente la distancia entre un punto en la página y la parte inferior de la ventana del navegador usando JavaScript?

Question

Una vista en mi aplicación web tiene una mesa que puede ser muy largo, así que lo envolvió en un div con overflow: auto; max-height: 400px; que los usuarios puedan desplazarse a través de ella, manteniendo los otros controles en la página visible.

Quiero usar un poco de JavaScript para ajustar dinámicamente la propiedad de CSS max-height para que el div se extienda hasta la parte inferior de la ventana del navegador. ¿Cómo puedo determinar este valor? Las soluciones de jQuery están bien.

La tabla no se inicia en la parte superior de la página, así que no puedo acaba de establecer la altura a 100%.

Answer 1

Algo como esto funcionaría creo:

var topOfDiv = $('#divID').offset().top; 
var bottomOfVisibleWindow = $(window).height(); 
$('#divID').css('max-height', bottomOfVisibleWindow - topOfDiv - 100); 

Answer 2

window.innerHeight le da la altura visible de toda la ventana. Hice algo casi idéntico recientemente, así que estoy bastante seguro de que eso es lo que necesita. :) Déjame saber, sin embargo.

EDITAR: Aún necesitará el valor Y del div desbordado que puede obtener al document.getElementById("some_div_id").offsetHeight, ya que .style.top no le dará un resultado a menos que se haya establecido específicamente en un punto a través de CSS. .offsetHeight debería darle el valor correcto 'superior'.

Luego, solo es cuestión de establecer el tamaño de la tabla a la altura de la ventana, menos el valor "superior" del div, menos cualquier margen de maniobra arbitrario que desee para otro contenido.

Answer 3

algo así como max-height: 100%, pero no olvidemos a la altura html y cuerpo 100%.

Answer 4

tuve un problema muy similar, excepto en mi caso tuve un elemento emergente dinámica (un widget jQuery UI selección múltiple), a la que quería aplicar una max-height de modo que nunca se fue por debajo de la parte inferior de la página. El uso de desplazamiento(). Superior en el elemento de destino no fue suficiente, ya que devuelve la coordenada x en relación con el documento, y no el desplazamiento hacia la posición vertical de la página.

Así que si el usuario se desplaza hacia abajo de la página, el desplazamiento(). Top no proporcionará una descripción precisa de dónde están en relación con la parte inferior de la ventana; deberá determinar la posición de desplazamiento de la página .

var scrollPosition = $('body').scrollTop(); 
var elementOffset = $('#element').offset().top; 
var elementDistance = (elementOffset - scrollPosition); 
var windowHeight = $(window).height(); 
$('#element').css({'max-height': windowHeight - elementDistance});