javascript - jquery.height() and float parameter in CSS

I'd noticed a strange behaviour of jquery.height() function. Have a look at the following code.

CSS:

div.text-field {
    font-family: sans-serif;
    margin: 3px;
    float: left;
}

HTML:

<div id="someid">
  <div class="text-holder">
    <div class="text-field">text here</div>
  </div>
</div>

JS:

console.log($("someid").find("text-holder").height());

The last line outputs 0 if I have float: left; in CSS file, and otputs real height if I remove float: left;. What is the reason of such a behaviour? Can I use height() function together with float: left;?

I'd noticed a strange behaviour of jquery.height() function. Have a look at the following code.

CSS:

div.text-field {
    font-family: sans-serif;
    margin: 3px;
    float: left;
}

HTML:

<div id="someid">
  <div class="text-holder">
    <div class="text-field">text here</div>
  </div>
</div>

JS:

console.log($("someid").find("text-holder").height());

Share Improve this question asked Dec 12, 2012 at 15:56 Eugeny89 3,73110 gold badges55 silver badges103 bronze badges

1 Try to clear after float. – Vucko Commented Dec 12, 2012 at 16:00
1 because floats remove the element from the normal flow. try using overflow:hidden – GajendraSinghParihar Commented Dec 12, 2012 at 16:03
You should see [this][1]! Your question will completely answer there! [1]: stackoverflow.com/questions/218760/… – Soroosh Noorzad Commented May 16, 2015 at 15:17
Just to give a direct solution/ hack to fetching the correct height in javascript for an unfloated parent with floated descendants: set parent as floated in javascript, get height (A), unset parent as floated, get height (B), The actual height = max(A, B). – Geert-Jan Commented Sep 28, 2016 at 14:56

Add a comment |

6 Answers 6

Sorted by: Reset to default 6

When float elements are within a container, that element does not apply the height of the container, because the element is no longer in the "flow". It is removed from the current element, and applied to it's parent, hence the issue. You can fix it by using either inline-block, or clear: both

I usually use a 0 height element with clear both as the last child in the container. This causes the container to "stretch" around the floating objects:

<div style="clear: both; line-height: 0; height: 0;">&nbsp;</div>

This is a variant on the QuirksMode article, and has good cross browser compatibility.

I've rewritten your code to include it and demonstrate the results:

<html>

<head>
<title>test</title>
<style type="text/css">
div.text-field
{
    border: 1px solid red;
    font-family: sans-serif;
    margin: 3px;
    float: left;
}

div.text-holder
{
    border: 1px solid blue;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $("#output1").text($("#someid1 .text-holder").height());
    $("#output2").text($("#someid2 .text-holder").height());
});
</script>
</head>

<body>

<div id="someid1">
  <div class="text-holder">
    <div class="text-field">text here</div>
  </div>
</div>
<br>
<div id="output1">&nbsp;</div>

<br><br><br>

<div id="someid2">
  <div class="text-holder">
    <div class="text-field">text here</div>
    <div style="clear: both; line-height: 0; height: 0;">&nbsp;</div>
  </div>
</div>
<br>
<div id="output2">&nbsp;</div>

</body>

</html>

The demonstration can also be viewed on JSFiddle.

floats removes element from the space therefore it occupies 0 space. So height() is space it takes up that is 0

because floats remove the element from the normal flow. try using overflow:hidden

see the DEMO

for more details http://www.quirksmode.org/css/clearing.html

In jQuery the test script looks like:

console.log($("#someid").find(".text-holder").height());

if you modify the html to clear the float, the parent will gain height:

    <div id="someid">
        <div class="text-holder">
            <div class="text-field">text here</div>
            <div style="clear: both;"></div>
        </div>
    </div>

I had the same issue where I was using float for better element positioning. If however you (like me) know beforehand what the exact contents of the element will be, you can add a height attribute with a value (e.g. height: 30px) to your CSS class, so the jQuery .height() method does work.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jquery.height() and float parameter in CSS - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)