动态设置DIV的高度

Question

在Web应用程序中，我有一个包含DIV的页面，该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 30像素每方，300像素的屏幕的顶部，与底部齐平。添加一个overflow:auto;来处理内容大于div的情况。

---

编辑：@任何标记，解释会很好......答案有问题吗？

Answer 3

该DIV包含一个控制，它自己的溢出处理。

Answer 4

如果我理解你的要求，这应该做的伎俩：

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

Answer 5

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

这是动态调整对象的高度所需的最基本的JS代码。我只是做了这事，我有一些汽车height属性，但是当我通过XMLHttpRequest添加一些内容，我需要调整我的父母DIV这的offsetHeight属性的确在IE6/7和FF3

的伎俩

Answer 6

稍作修改：

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

Answer 7

最简单的我能想出...

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

现在，所有你需要做的是resizableHeight类添加到要自动调整（到它的一切父母）。

Answer 8

的灵感来自@杰森 - 彩旗，为高度或宽度相同的事情：

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