页面大小作为屏幕大小和内部可滚动框架

Question

这是场景：
我有一个 asp.net 网页，它在网格视图中显示动态数据。

我使用母版页来显示页面的页眉和页脚，并且此 gridview 显示在 contentplaceholder 的 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 -->包含 GridView 的 div 的高度（以像素为单位）。 的样式设置

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";

希望这有帮助。