动态设置DIV的高度

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

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

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

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

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

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

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

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