30

在 Web 应用程序中，我有一个包含 DIV 的页面，该页面具有自动宽度，具体取决于浏览器窗口的宽度。

我需要对象的自动高度。DIV 从顶部屏幕开始大约 300 像素，它的高度应该使它伸展到浏览器屏幕的底部。我有容器 DIV 的最大高度，因此 div 必须有最小高度。我相信我可以在 CSS 中限制它，并使用 Javascript 来处理 DIV 的大小调整。

我的 javascript 并没有达到应有的水平。我可以编写一个简单的脚本来为我做这件事吗？

编辑： DIV 包含一个控件，它自己进行溢出处理（实现自己的滚动条）。

4

7 回答 7

36

试试这个简单的特定功能：

function resizeElementHeight(element) {
  var height = 0;
  var body = window.document.body;
  if (window.innerHeight) {
      height = window.innerHeight;
  } else if (body.parentElement.clientHeight) {
      height = body.parentElement.clientHeight;
  } else if (body && body.clientHeight) {
      height = body.clientHeight;
  }
  element.style.height = ((height - element.offsetTop) + "px");
}

它不取决于当前与指定主体顶部的距离（以防您的 300px 发生变化）。

编辑：顺便说一句，每次用户更改浏览器的大小时，您都希望在该 div 上调用它，因此您当然需要为此连接事件处理程序。

于 2008-08-28T19:11:28.617 回答
10

在溢出的情况下应该发生什么？如果您希望它到达窗口底部，请使用绝对定位：

div {
  position: absolute;
  top: 300px;
  bottom: 0px;
  left: 30px;
  right: 30px;
}

这将把 DIV 放在每边 30px 处，距离屏幕顶部 300px 处，并与底部齐平。添加一个overflow:auto;以处理内容大于 div 的情况。

编辑：@Whoever 标记了这个，解释会很好......答案有问题吗？

于 2008-08-28T18:57:23.410 回答
6

document.getElementById('myDiv').style.height = 500;

这是动态调整对象高度所需的非常基本的 JS 代码。我只是在我有一些自动高度属性的地方做了这件事，但是当我通过添加一些内容时，XMLHttpRequest我需要调整我的父 div 的大小，而这个 offsetheight 属性在 IE6/7 和 FF3 中起到了作用

于 2008-08-28T19:03:42.630 回答
0

如果我明白你在问什么，这应该可以解决问题：

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use 
// window.innerWidth and window.innerHeight

var windowHeight;

if (typeof window.innerWidth != 'undefined')
{
    windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first 
// line in the document)
else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth != 'undefined' 
        && document.documentElement.clientWidth != 0)
{
    windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
    windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}

document.getElementById("yourDiv").height = windowHeight - 300 + "px";
于 2008-08-28T19:02:53.350 回答
0

稍作修正：

function rearrange()
{
var windowHeight;

if (typeof window.innerWidth != 'undefined')
{
    windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first
// line in the document)
else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth != 'undefined'
        && document.documentElement.clientWidth != 0)
{
    windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
    windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}

document.getElementById("foobar").style.height = (windowHeight - document.getElementById("foobar").offsetTop  - 6)+ "px";
}
于 2009-11-11T23:51:08.337 回答
0

我能想到的最简单的...

function resizeResizeableHeight() {
    $('.resizableHeight').each( function() {
        $(this).outerHeight( $(this).parent().height() - ( $(this).offset().top - ( $(this).parent().offset().top + parseInt( $(this).parent().css('padding-top') ) ) ) )
    });
}

现在您所要做的就是将 resizableHeight 类添加到您想要自动调整大小的所有内容（添加到它的父级）。

于 2014-09-26T15:06:39.500 回答
0

受@jason-bunting 启发，高度或宽度都一样：

function resizeElementDimension(element, doHeight) {
  dim = (doHeight ? 'Height' : 'Width')
  ref = (doHeight ? 'Top' : 'Left')

  var x = 0;
  var body = window.document.body;
  if(window['inner' + dim])
    x = window['inner' + dim]
  else if (body.parentElement['client' + dim])
    x = body.parentElement['client' + dim]
  else if (body && body['client' + dim])
    x = body['client' + dim]

  element.style[dim.toLowerCase()] = ((x - element['offset' + ref]) + "px");
}
于 2016-11-05T04:24:31.877 回答