Question

我正在尝试确定div的高度。这听起来很简单，但由于它只有后代内容被浮动这一事实而变得复杂，所以要求高度/ 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或其他什么。

如何确定“root”元素的REAL高度？（例如，如果“text-one”的高度为50而“text-two”的高度为20，则会知道真正的高度为50）

我想有一些逻辑来计算所有后代元素的高度，并计算它们是否漂浮等等，并给我一个最终数字......但我不够聪明，无法解决这个问题。 / p>

提前致谢。

编辑：请注意更改HTML（例如包含“清除”）不是一个选项。我需要能够告诉这个div的高度。

Answer 1

那是因为身高为零。尝试查看此

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

进行验证

Answer 2

如果所有#root的孩子（严格来说，后代）都是浮动的，那么它确实具有零高度。尝试在其上设置背景颜色，以证明它不占用垂直空间。

如果你得到两个浮动元素的高度，那么你可以采取更大的那些：

var height = Math.max(leftHeight, rightHeight);

Answer 3

读取所有内部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.

<强> Working Demo

Answer 4

我删除了一个答案，因为我错过了很多其他人已经指出过的内容：高度确实是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>

Answer 5

将根元素的溢出设置为隐藏，然后将其高度拉伸以匹配内部元素。使用您在其他评论中发布的链接进行测试，它确实有效！

#root {
  background-color: lightgreen; /* for demo purposes */
  overflow: hidden;
}

如果不能使用CSS文件，那么可以使用jQuery设置CSS：

$('#root').css( 'overflow', 'hidden' );
// ...then your height code

Answer 6

如上面部分引用的，这里的问题是css问题，特别是清除浮动元素。可以在www.positioniseverything.net/easyclearing.html找到一个很好的概述。由于您无法更改html标记，您可以采用位置转换解决方案并通过使用js / jQuery向浮动元素的父级添加类来应用它，

$('#root .body').addClass('clearfix');

现在你应该可以使用

访问高度了

$('#root').height();

如上所述。希望有所帮助

如何获得div的TRUE高度？

6 个答案: