Is it possible to override css dynamically using jquery?

The best way is to overwrite the styles is using css, and not jquery. F.e. you can only add a class with jquery, and define the rest in your stylesheet.

//script to add a class, this can be anything
$('.mainDiv').click(function(){
    $(this).addClass('active');
});

//css to define the different min-heights. (I would not recommend using !important)
.mainDiv {
   min-height:100px !important;
}

.mainDiv.active {
   min-height:200px !important;
}

Try, important is not supported by JQuery

$(".mainDiv").css({"min-height" : ($(window).height() * 0.7) +"px"});

As This will be inline CSS, thus it will have preference

Try

$(".mainDiv").css({"min-height" : ($(window).height() * 0.7) +"px"});

Demo: Fiddle

Try without the {}

$(".mainDiv").css("min-height", ($(window).height() * 0.7) +"px");

It's possible you may also need to do the calculation seperately, save it in a variable, and just use this variable, such as:

var newHeight = $(window).height() * 0.7;
$(".mainDiv").css("min-height", newHeight +"px");

Try this

$(".mainDiv").css({"min-height" : ($(window).height() * 0.7) +"px"});

or just

$(".mainDiv").attr('style',"min-height:"+($(window).height() * 0.7) +"px !important;");

Check this fiddle. You can try $(".mainDiv").css({"min-height" : ($(window).height() * 0.7) +"px"});

YOu can try this

$(document).ready(function() {
    $(".mainDiv").attr('style', 'min-height: ' +($(window).height() * 0.7) +"px !important");
});

FIDDLE DEMO

Refer For more Refer Here

Instead of quotes ("), use back ticks instead `, this is the only way jQuery updates css.

$(\`.mainDiv").css({"min-height" : ($(window).height() * 0.7) +"px !important\`});