размер страницы как размер экрана и прокручиваемый фрейм внутри

Question

Вот сценарий:
У меня есть веб-страница asp.net, которая отображает динамические данные в виде сетки.

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

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

Вроде как верхний и нижний колонтитулы остаются в той же позиции, и содержимое внутри нихпрокручиваемый.

Я действительно не знаю, как этого добиться.

Любая помощь по этому вопросу высоко ценится.

Спасибо.

Answer 1

Попробуйте jQuery:

function changeHeight(){
  var winHeight = $(window).height();
  var heightOfHeaderAndFooter = 200px; // change this to what you need
  $('#myDiv').height($(window).height() - heightOfHeaderAndFooter);
}
$(window).resize(function() { // changes height with browser window
  changeHeight();
});
$(document).ready(function() { // changes height on load of the page
  changeHeight();
});

Вам нужно, чтобы ваш div использовал width:auto и динамически изменял высоту, чтобы всегда держать нижний колонтитул внизу страницы.Кроме того, убедитесь, что ваш div имеет overflow-y:scroll

Answer 2

Фрагмент кода:

1. divMain.style.height -> высота div в пикселях, содержащих GridView. Этот тег также имеет настройку стиля style="overflow-y:auto;"

2. document.documentElement.clientHeight -> высота рабочей / клиентской области для вашего дисплея.

3. document.getElementById("divMain").offsetTop -> высота содержимого до divMain.

4. 25 -> это высота моего дополнительного нижнего колонтитула.
5. Результат в пикселях - это высота, доступная для вашего divMain.

divMain.style.height = (document.documentElement.clientHeight - document.getElementById("divMain").offsetTop - 25) + "px";

Надеюсь, это поможет.