CSS - dynamically calculate width for IE11 with out Jquery

Question

My application works fine in IE8, now we are migrating to IE11. Please find the div css below

.contentDiv{
  height:expression(document.body.clientHeight - contentDiv.getBoundingClientRect().top);
  overflow-y:scroll;
}

Css expression has been depreciated now. Could you please suggest me how to calculate the dynamic div width height for IE11 and also it should work in IE8 also?

What is the purpose of the calculation? Are you maintaining an aspect ratio or placement of the div on the page? — Magnus, Aug 03 '15 at 15:46
This above Div Style is generic of all DIv in application. The purpose of calculation is for placement of div . and it should be using document.body.clientHeight - contentDiv.getBoundingClientRect().top. — user3153650, Aug 04 '15 at 08:19

score 0 · Answer 1 · answered Aug 06 '15 at 22:29

If you have jQuery on the site (and you should) then you could have jQuery quickly cycle through the elements with that class and set the height explicitly.

$(document).ready(function(){
    $('.contentDiv').each(function(){
        $(this).css('height',$(document).height() - $(this)[0].getBoundingClientRect().top);
    });
});

You'll want to keep the overflow-y:scroll; style definition in the CSS.

CSS - dynamically calculate width for IE11 with out Jquery

1 Answers1