根据其他 div 的高度获取 div 的高度答案

【问题标题】：get the height of a div based on other divs heights根据其他 div 的高度获取 div 的高度
【发布时间】：2014-01-08 00:50:36
【问题描述】：

这是一个简单的 html 示例：

<div id="column-5" style="height:300px;width:200px;background:red">
<div class="httwitter-thread-navigation" style="height:223px;width:100%;background:pink">
    <div class="mydiv" style="width:auto;background:yellow;"></div>
</div>

我想要实现的是根据以下操作为 .mydiv 提供高度： .mydiv 的高度应该是“#column-5 的高度” - “.httwitter-thread-navigation 的高度 - 40px”

在这种情况下翻译为

300 - 223 - 40 = 37 像素

如何使用 javascript 获得 37px 的高度？

考虑到第 5 列或另一列的高度可能未在 css 中指定，因此 javascript 应检测它的 innerHeights（包括边距和填充）

非常感谢

在这里提琴：http://jsfiddle.net/omegaiori/hafn5/1/

【问题讨论】：

标签： javascript jquery html css height

【解决方案1】：

.mydiv 的高度应该是“#column-5 的高度” - ".httwitter-thread-navigation 的高度 - 40px"

总结得差不多了？

$('.mydiv').height(function() {
    return $('#column-5').height() - $('.httwitter-thread-navigation').height() - 40;
});

FIDDLE

jQuery 同时拥有outerHeight 和innerHeight，这取决于你的需要。阅读文档。

【讨论】：

@omegaiori - 如果 innerHeight 是你所追求的，是的。您的小提琴和答案中的小提琴都将高度设置为 37px

【解决方案2】：

给你：

$(document).ready(function() {

    $('.mydiv').css('height', ($('#column-5').height() - $('.httwitter-thread-navigation').height() - 40);

});

【讨论】：