动态设置DIV的高度

Question

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

我需要一个物体的自动高度.DIV从顶部屏幕开始大约300px,它的高度应该使它伸展到浏览器屏幕的底部.我有一个容器DIV的最大高度,所以必须有div的最小高度.我相信我可以在CSS中限制它,并使用Javascript来处理DIV的大小调整.

我的javascript并不像应该的那样好.有一个简单的脚本,我可以写,这将为我做这个？

编辑:DIV包含一个控件,它执行自己的溢出处理(实现自己的滚动条).

Answer 1

试试这个简单,具体的功能:

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上调用它,所以当然,你需要连接事件处理程序.

Answer 2

在溢出的情况下会发生什么？如果您希望它只是到达窗口的底部,请使用绝对定位:

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

这将使DIV 30px从两侧进入,距离屏幕顶部300px,并与底部齐平.添加一个overflow:auto;处理内容大于div的情况.

编辑:@Woeever标记这一点,解释会很好......答案有问题吗？

Answer 3

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

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