[英]How can I get the TRUE height of a div?
我正在试图确定div的高度。 这听起来很简单，但由于只有后代内容被浮动这一事实而变得复杂，所以要求height / outerHeight（使用jQuery）/ clientHeight / offsetHeight只返回0，即使它清楚地显示在页面上，它肯定会被渲染高度。 以下是HTML结构的示例：
<div id="root">
<div class="header"></div>
<div class="body">
<div class="text-left" id="text-one">
<p>Some text taking up multiple lines</p>
</div>
<div class="text-right" id="text-two">
<p>Other text</p>
</div>
</div>
</div>
“text-left”和“text-right”元素有“float：left;” 并且“浮动：正确;” 在他们身上，所以当我要求“root”的高度时，它告诉我它是0.但是，当然，当我得到“text-one”和“text-two”的高度时，它正确告诉我它是20或其他什么。
如何确定“根”元素的REAL高度？ （例如，如果“text-one”的高度为50而“text-two”的高度为20，则会知道真正的高度为50）
我想有一些逻辑来计算所有后代元素的高度，并计算它们是否漂浮等等，并给我一个最终数字......但我不够聪明，不能解决这个问题。
提前致谢。
编辑：请注意更改HTML（例如包括“清除”）不是一个选项。 我需要能够告诉这个div的高度。
这是因为高度为零 。 试试这个
<html><head><title>test</title></head><body>
<div id="root" style="border:1px solid red">
<div class="header"></div>
<div class="body">
<div class="text-left" id="text-one" style="float: left;">
<p>Some text taking up multiple lines</p>
</div>
<div class="text-right" id="text-two" style="float: right;">
<p>Other text</p>
</div>
</div>
</div></body>
标题是空的，并且正文仅包含从布局中浮出的元素，因此它也计为空，留下根目录的内容以保持打开状态。
同样的推理，身体元素是零高度; 您可以通过添加<body style="border:1px solid blue">
如果所有#root的子项（严格来说，后代）都是浮动的，那么它确实具有零高度。 尝试在其上设置背景颜色，以证明它不占用垂直空间。
如果你得到两个浮动元素的高度，那么你可以采取更大的：
var height = Math.max(leftHeight, rightHeight);
如何读取所有内部div并存储两个div的最大高度值？
我不认为是非常正确的但这里是尝试：
var max_height = 0;
$.each( $('#root div'), function(x, y){
var yHeight = $(y).height();
max_height = ( yHeight > max_height) ? yHeight : max_height;
});
console.log(max_height); //should have the height value.
我删除了一个答案，因为我错过了很多其他人已经指出过的内容：高度确实是0，而且一切正常。 你需要做些什么才能得到你所说的根似“似乎”所拥有的高度，就是让div 实际上具有那个高度，这可以通过简单地清除div末尾的浮点数来实现。 。
<div id="root">
<div class="header"></div>
<div class="body">
<div class="text-left" id="text-one">
<p>Some text taking up multiple lines</p>
</div>
<div class="text-right" id="text-two">
<p>Other text</p>
</div>
</div>
<div style="clear: both;"></div>
</div>
将根元素的溢出设置为隐藏 ，然后将其高度拉伸以匹配内部元素。 使用您在其他评论中发布的链接进行测试，它确实有效！
#root {
background-color: lightgreen; /* for demo purposes */
overflow: hidden;
}
如果使用CSS文件不是一个选项，那么您可以使用您的jQuery来设置CSS：
$('#root').css( 'overflow', 'hidden' );
// ...then your height code
如上面部分引用的，这里的问题是css问题，特别是清除浮动元素。 可以在www.positioniseverything.net/easyclearing.html找到一个很好的概述。 由于您无法更改html标记，您可以采用位置转换解决方案并通过使用js / jQuery向浮动元素的父级添加类来应用它。
$('#root .body').addClass('clearfix');
现在你应该能够访问高度了，
$('#root').height();
正如刚才提到的。 希望有所帮助
如何通过 JS 获取 div 的高度并将该高度分配给另一个 div？
[英]How can i get via JS the height of a div and assign that height to another div?
我有一个不断改变身高的div。 我怎样才能得到第二个div来不断采用第一个div的高度？
[英]I have a div that constantly changes height. How can I get a second div to constantly adopt the height that the first div is?
我不知道如何让带有图像的 div 服从父 div 的高度约束
[英]I can't figure out how to get div with image to obey the height constrains of the parent div
javascript：即使在悬停时更改，我如何立即获得DIV宽度/高度
[英]javascript: how can i get DIV width/height instantly even if changed on hover
如何在不将其呈现到页面的情况下获取div的正确高度属性？
[英]How can I get the correct height property of a div without rendering it to the page?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.