Overriding min-height property

Question

If possible, how can I override a min-height property of a class for a particular div?

Example:

.someclass {
  min-height: 200px;
}

<div class="someclass">
  -- content --
</div>

I have tried using something like style="min-height:100px!important;" on the div but that doesn't seem to work.

Answer 1

it is very bad habit to use !important declarations in your standard stylesheets. Avoid it at all costs, because it breaks the cascading nature of the stylesheets.

Use a more specific selector to override previous styles.

To reset styles to the default, use auto|inherit|0 depending on the attribute. For min-height it's 0. CSS3 introduces the special value inital which should be preferably used - but unfortunately it has limited IE support.

In your case min-height:100px; in a selector with higher specificity (either id or inline style - preferably not the latter) should do the trick.

let div = document.querySelector("#morespecific");

div.innerHTML = "This div has its min-height set to: "+window.getComputedStyle(div).minHeight;

.someclass{
    min-height:200px;
    border:1px solid red;
}
#morespecific{
     min-height:100px;
     border-color:blue;
}

<div id="morespecific" class="someclass">
-- content --
</div>

Answer 2

I couldn't find any better answer than to just use 0 to override min stuff, and use something like 1000% to override max stuff.

Answer 3

An !important flag needs to go inside the semi-colon, like this:

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

Furthermore, you shouldn't really be using !important flags if you can help it. An overriding rule needs to be more specific than the original rule.

I think you need to read up on specificity and inheritance.