Achieving module behavior in CSS calc () - is this possible?

Question

I would like to use calc () so that the height of the element depends on the size of the screen, but since I agree with the base grid, this height should always be a multiple of my specific $baseline.

I see that the operator is modno longer widely supported ( Using a module in css calc function ).

Is there another way to achieve fluid height for my element without setting multiple breakpoints in height?

Answer 1

bootstrap uses several breakpoints as it gives the least headache.

calc , , .

-, .

% , , max-height , .

. - , :

/**
 *                                           ||||||||∞ layout-lg-direction
 *                                 ||||||||||||||||||∞ layout-md-direction
 *                      |||||||||||||||||||||||||||||∞ layout-sm-direction
 *           ||||||||||||||||||||||||||||||||||||||||∞ layout-xs-direction
 * ||||||||||||||||||||||||||||||||||||||||||||||||||∞ layout-direction
 * |---------|----------|----------|---------|--------
 * 0px     480px      768px      940px     1200px    ∞px
 *
 *///direction: row, column

, , , , , .

, @if $i % $breakpoint == 0 - , % , .