2 html javascript height css-float
我正在试图确定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或其他什么.
如何确定"根"元素的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">