2

need some help understanding strange IE behavior. I have two div's, one next to each other. One of the div's has text, the other one is empty. I want to set the height of the empty div to match the div with text. Setting the empty div height to .innerHeight() of the div with text does not work in IE9/10(the new height is 1px bigger than it should be, IE8 works fine). Is there a cross-browser solution for this one?

html:

<div class="container">
    <div class="row" id="left">foo</div>
    <div class="row" id="right"></div>
</div>

css:

.container { width: 200px; }
.row { font-size: 11px; font-weight: bold; color: #666; float: left; width: 100%;  border-bottom: 1px solid #ddd; position: relative;}
#left { background-color:yellow; width: 50%; }
#right { background-color:lightblue; width: 50%; }

js:

var $right = $("div#right"),
    $left = $("div#left")
;

$right.css({
    height: $left.innerHeight()
});

Here's the fiddle, and a screenshot from IE10

Screenshot(IE10):

4
  • FWIW, your fiddle works fine for me on IE9, I don't see a difference, and if I dump out their innerHeight and height values, I get the same value. Oct 28, 2013 at 15:09
  • It works for me as well in IE9. It does break if I change to zoom to 110% though. Oct 28, 2013 at 15:10
  • Are you sure you're not using some sort of standards compatibility mode as it works for me too. Also if you are only supporting back to ie8 then you may want to use display table and table-cell as it will allow you to have equal height divs without the need for js
    – Pete
    Oct 28, 2013 at 15:21
  • Can anyone try it out on IE10? I added a screenshot, zoom is 100%, all settings on default.
    – DeadMoroz
    Oct 28, 2013 at 15:25

1 Answer 1

0

What if instead of setting the height of the right div you simply set the height of the container?

The HTML stays the same.

<div class="container">
    <div class="row" id="left"> foo </div>
    <div class="row" id="right"></div>
</div>

I changed the CSS by setting the height of the left and right divs to 100%. This has no effect since the parent container has no set height. But once the script changes the container height, the children will react.

.container {
    width: 200px;
}
.row { 
    font-size: 52px; font-weight: bold; color: #666; float: left; width: 100%;  border-bottom: 1px solid black; position: relative;}

#left {
    background-color:yellow;
    width:50%;
    height:100%;
}

#right {
    background-color:lightblue;
    width:50%;
    height:100%;
}

I changed the JavaScript to set the height of the container div instead of the right div.

var $left = $("div#left"),
    $container = $("div.container");
$container.css("height", $left.innerHeight());

Here it is in JSFiddle. I tested it in Firefox and IE9. It seems to work well in IE9 even when I change the zoom.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.