Как легко найти расстояние между точкой на странице и нижней частью окна браузера с помощью JavaScript?

представление в моем веб-приложении имеет таблицу, которая может быть очень длинной, поэтому я завернул ее в div с overflow: auto; max-height: 400px; таким образом, пользователи могут прокручивать его, сохраняя другие элементы управления на странице видимыми.

Я хочу использовать немного JavaScript для динамической настройки max-height свойство CSS, поэтому div растягивается до нижней части окна браузера. Как определить это значение? решения jQuery в порядке.

таблица не начинается в верхней части страницы, поэтому я не могу просто установить высота до 100%.

9
dimensions javascript jquery positioning

4 ответов

что-то вроде этого будет работать, мне кажется:

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

У меня была очень похожая проблема, за исключением моего случая, у меня был динамический всплывающий элемент (виджет jQuery UI Multiselect), к которому я хотел применить макс-высота чтобы он никогда не опускался ниже нижней части страницы. Использование offset().сверху на целевом элементе было недостаточно, потому что это возвращает координату x относительно документ и не вертикальное положение прокрутки страницы.

поэтому, если пользователь прокручивает страницу вниз, смещение.)(top не будет предоставлять точное описание того, где они находятся относительно нижней части окна - вам нужно будет определить положение прокрутки страницы.

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

window.innerHeight дает видимую высоту всего окна. Я сделал что-то почти идентичное недавно, поэтому я уверен, что это то, что вам нужно. :) Дайте мне знать, хотя.

EDIT: вам все равно понадобится Y-значение переполненного div, которое вы можете получить document.getElementById("some_div_id").offsetHeight видя, что .style.top не даст вам результат, если он не был специально установлен в точку через CSS. .offsetHeight должен дать вам правильное "верхнее" значение.

тогда это просто вопрос установки размера таблица к высоте окна, минус "верхнее" значение div, минус любая произвольная комната покачивания вы хотите для другого содержания.

1

что-то вроде max-height: 100%, но не забывать html и высоту тела 100%.

0