如何获得 div 的真实高度？

发布于 2024-07-30 06:30:40 字数 938 浏览 1 评论 0原文

我正在尝试确定 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 或其他什么。

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

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

提前致谢。

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

原文

I'm trying to determine the height of a div. This sounds simple, but is complicated by the fact that it's only descendant contents are floated, so asking for the height/outerHeight (using jQuery)/clientHeight/offsetHeight only returns 0, even though it's clear that on the page, it is rendered certainly with a height. Here is an example of the HTML structure:

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

The "text-left" and "text-right" elements have "float: left;" and "float: right;" on them, so when I ask for the height of "root", it tells me it's 0. However, of course, when I get the height of the "text-one" and "text-two", it correctly tells me that it's 20 or whatever.

How can I determine the REAL height of the the "root" element? (For example, if "text-one" had a height of 50 and "text-two" had a height of 20, it would know that the true height is 50)

I imagine there's some kind of logic to work out all the descendant elements' heights and calculate if they're floated etc etc and give me a final figure...but I'm not smart enough to work that out.

Thanks in advance.

EDIT: Please note changing the HTML (to include a "clear", for example) is not an option. I need to be able to tell the height of this div as it is.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南城旧梦 2024-08-06 06:30:40

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

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

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

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

Set the overflow of the root element to hidden, then its height will stretch to match the inner elements. Tested with the link you posted in another comment, and it works!

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

If using a CSS file is not an option, then you can use your jQuery to set the CSS:

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

回复收藏 0 原文

ら栖息 2024-08-06 06:30:40

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

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

现在您应该能够访问高度，

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

如上所述。希望有帮助

As partly referenced above the problem here is a css issue, specifically clearing of floated elements. An excellent overview of which can be found at www.positioniseverything.net/easyclearing.html. As you are unable to alter the html mark-up you could take the positioniseverthing solution and apply it by adding a class to the parent of the floated elements with js/jQuery,

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

Now you should be able to access the height with,

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

as mentioned above. Hope that helps

回复收藏 0 原文

手心的温暖 2024-08-06 06:30:40

这是因为高度为零。尝试查看此

<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元素的高度为零；您可以通过添加进行验证

That's because the height is zero. Try viewing this

<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 is empty, and body only contains elements floated out of the layout, so it also counts as empty, leaving root bereft of content to hold it open.

Also by the same reasoning, the body element is zero height; which you can verify by adding <body style="border:1px solid blue">

回复收藏 0 原文

音盲 2024-08-06 06:30:40

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

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

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

If all #root's children (strictly speaking, descendants) are floated, then it does indeed have a height of zero. Try setting a background colour on it to prove that it occupies no vertical space.

If you get the heights of the two floated elements, then you can take the greater of those:

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

回复收藏 0 原文

手心的海 2024-08-06 06:30:40

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

工作演示

How about a function that reads all inner divs and stores the maximum height value from the two divs?

I dont think is very correct but here is try:

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

回复收藏 0 原文

相思碎 2024-08-06 06:30:40

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

I deleted an answer because I missed out on what a lot of others has already pointed out: the height is, quite literally, 0, and everything is working. What you need to do to get the height that, in your words, the root div 'seems' to have, is to make that div actually have that height, which can easily be achieved by simply clearing the floats at the end of the 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>

回复收藏 0 原文

~没有更多了~