Question

I have a liquid layout and am learning/ using Less.js for my CSS.

I have a div ‘A’ that needs to take account of the user viewbox, substract another div ‘B’ height (which is in %) and finally another div ‘C’ which is in pixel.

Here is what I thought would work but doesn’t:

@menubarsHeight: 7%;   // declaring variable with div 'B' 's height.
@ttlHeight: '$(window).height()';     // calculating height using jquery 
@midParentHeight: -20px + @didParentHeight - @menubarsHeight;     // calculating the height based on the above two variables, -20px is the height of div 'C'.     

Answer 1

There are a few things unclear here. Namely, you don’t tell us what @didParentHeight is, and you calculate @ttlHeight but don’t use it. Nor do you state explicitly what div B’s parent is (the window?).

Given these uncertainties, I will assume some things and attempt an answer. If all three div’s have the window as their parent, and your javascript is giving a correct window height, then it seems like this would be the answer:

@menubarsHeight: 0.07; /* define as decimal */
@midParentHeight: @ttlHeight - 20px - (@ttlHeight * @menubarsHeight);

I use 0.07 instead of 7% because I’m not quite sure if LESS will do the multiplication correctly using a percentage (it would be mixing px and % units). So with the decimal, then assuming @ttlHeight were 100px, this should calculate to:

@midParentHeight: 100px - 20px - (100px * 0.07);

Which should become:

@midParentHeight: 100px - 20px - 7px = 73px

If you need to use the @menubarsHeight to later actually define your div B, then do this (which will take the decimal and put it into a % unit value for css):

div.B { height: percentage(@menubarsHeight); }