首页 / 知识

关于javascript：动态设置DIV的高度

2023-04-13 12:59:00

Setting the height of a DIV dynamically

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

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

我的JavaScript不够理想。我可以编写一个简单的脚本来帮我做到这一点吗？

编辑：
DIV包含一个控件，该控件执行自己的溢出处理(实现自己的滚动条)。

尝试以下简单的特定功能：

1
2
3
4
5
6
7
8
9
10
11
12

它不取决于当前距指定主体顶部的距离(以防300像素变化)。

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

如果发生溢出该怎么办？如果要使其仅到达窗口底部，请使用绝对定位：

1
2
3
4
5
6
7

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

这样会将DIV从两侧各放30px，从屏幕顶部放300px，并与底部齐平。添加overflow:auto;以处理内容大于div的情况。

编辑：@谁将其标记为下来，一个解释将是不错的...答案有问题吗？

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

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

受@ jason-bunting启发，高度或宽度相同：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

最简单的我可以上...

1
2
3
4
5

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

现在，您要做的就是将resizableHeight类添加到要自动调整大小的所有内容中(作为其父类)。

进行较小的更正：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

如果我了解您的要求，就可以解决问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

设置动态浏览器应用程序

首页 / 知识

关于javascript：动态设置DIV的高度

Setting the height of a DIV dynamically

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢