2

我正在尝试确定 div 的高度。这听起来很简单，但复杂的是它只有后代内容是浮动的，所以要求高度/外部高度（使用 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 或其他。

如何确定“根”元素的真实高度？（例如，如果“text-one”的高度是 50，而“text-2”的高度是 20，它会知道真实高度是 50）

我想有某种逻辑可以计算出所有后代元素的高度并计算它们是否浮动等，然后给我一个最终数字……但我不够聪明，无法解决这个问题。

提前致谢。

编辑：请注意更改 HTML（例如，包括“清除”）不是一种选择。我需要能够按原样说出这个 div 的高度。

4

6 回答 6

7

那是因为高度为零。试试看这个

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

Header 是空的，而 body 只包含从布局中浮出的元素，所以它也算作空，让 root 失去内容以保持它打开。

同样道理，body 元素的高度为零；您可以通过添加来验证<body style="border:1px solid blue">

于 2009-08-04T11:42:51.150 回答
3

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

如果你得到两个浮动元素的高度，那么你可以取其中较大的一个：

var height = Math.max(leftHeight, rightHeight);
于 2009-08-04T11:44:52.333 回答
1

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

工作演示

于 2009-08-04T11:48:51.217 回答
1

我删除了一个答案，因为我错过了很多其他人已经指出的内容：高度实际上是 0，并且一切正常。用您的话来说，要获得根 div“似乎”具有的高度，您需要做的是使该 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>
于 2009-08-04T14:46:00.730 回答
0

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

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

现在你应该可以访问高度了，

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

正如刚才提到的。希望有帮助

于 2009-08-04T13:11:56.073 回答
0

将根元素的溢出设置为hidden，然后它的高度将拉伸以匹配内部元素。使用您在另一条评论中发布的链接进行了测试，它有效！

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

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

$('#root').css( 'overflow', 'hidden' );
// ...then your height code
于 2009-08-04T12:10:53.357 回答