动态设置DIV的高度 [英] Setting the height of a DIV dynamically

问题描述

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

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

我的javascript不是那么好。

编辑：
DIV有一个控件，它有自己的溢出处理（实现它的

b b b b pre> 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时间，用户改变了浏览器的大小，所以你需要连线的事件处理程序，当然。

In a web application, I have a page that contains a DIV that has an auto-width depending on the width of the browser window.

I need an auto-height for the object. The DIV starts about 300px from the top screen, and it's height should make it stretch to the bottom of the browser screen. I have a max height for the container DIV, so there would have to be minimum-height for the div. I believe I can just restrict that in CSS, and use Javascript to handle the resizing of the DIV.

My javascript isn't nearly as good as it should be. Is there an easy script I could write that would do this for me?

Edit: The DIV houses a control that does it's own overflow handling (implements its own scroll bar).

解决方案

Try this simple, specific function:

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

It does not depend on the current distance from the top of the body being specified (in case your 300px changes).

---

EDIT: By the way, you would want to call this on that div every time the user changed the browser's size, so you would need to wire up the event handler for that, of course.

这篇关于动态设置DIV的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！