动态设置两个浮动DIVS的高度

Posted

技术标签:

【中文标题】动态设置两个浮动DIVS的高度【英文标题】:Dynamically Set the Height of Two floated DIVS 【发布时间】:2010-09-18 17:28:30 【问题描述】:

编码使用VS2008完成 我的页面中有两个 div,即“dvLeftContent”和“dvRightContent”。 我无法静态设置页面的高度,因为“dvRightContent”在各个页面上具有可变高度(此处使用母版页) 是否有客户端函数(javascript 或 jquery)获取右 div 的高度并将其分配给左 div?

【问题讨论】:

【参考方案1】:

使用 jQuery:

$("#dvRightContent").bind("resize", function()
    $("#dvLeftContent").css('height', $("#dvRightContent").css('height')); 
);

【讨论】:

【参考方案2】:

还有一个 jQuery 插件可以为您完成这项工作:Equalize

它处理 rightcol 大于 leftcol 或 leftcol 大于 rightcol 的情况。它还允许您指定 leftcol 或 rightcol 中的哪个元素应该添加空格。

【讨论】:

【参考方案3】:

感谢 micahwittman。一些小改动

   $("#dvRightContent").resize(function()
        $("#dvLeftContent").css("height", ($("#dvRightContent").attr("offsetHeight") - 250 ) +"px");
    );

这是因为在这种情况下,高度只会给出“自动”,因为它的设置是这样的

【讨论】:

有趣。不客气,顺便说一句。此外,刚刚进行了快速编辑以修复我的用户名上的拼写错误。

以上是关于动态设置两个浮动DIVS的高度的主要内容,如果未能解决你的问题,请参考以下文章

增加包含浮动嵌套 div 的父 div 的高度

如何将两个浮动 div 设置为页面的 100% 高度

3个Divs等宽以Div为中心(清洁无浮动)[重复]

CSS:如何调整使用浮动属性和自动宽度和高度的两个 div 在底部对齐

奇怪的浮动块包装在引导程序 3 col-* divs 列表中[重复]

div+css之清除浮动