CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsive-design
sachinkondana
sachinkondana

Reputation: 671

How to negate px from %(percentage)?

How to achieve something like this 

height: calc(100% - 50px); 
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);

in non-suppoted browsers?

I have a responsive div, which has two childs. Out of which 1st child's height is in px, and i want the 2nd child should conver remaining spaces of the parent div. I have achieved it using : calc(), but it wont work with all browser? JS is my last preference. Ok. Let me have some suggestions please?

Upvotes: 0

Views: 96

Answers (2)

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

If you have a browser that doesn't support the calc expression, it's not hard to mimic with jQuery:

$('#yourEl').css('width', '100%').css('width', '-=50px');

if Calc is having problems Let Jquery handle it. :)

Upvotes: 1

jbangerter
jbangerter

Reputation: 363

If css doesn't work for you, you can get the height of the parent and subtract what you need from it.

var parent_height = document.getElementById("parent").offsetHeight; //-- Get Height of an element
document.getElementById("child").style.height = (parent_height - 50) + 'px';

Upvotes: 1

Related Questions