CODEWITHSUNDEEP
htmlcss
nik
nik

Reputation: 3678

Overriding min-height property

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.

Upvotes: 15

Views: 25911

Answers (4)

Christoph
Christoph

Reputation: 51201

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>

Upvotes: 19

AdamWhite
AdamWhite

Reputation: 1034

Inline styles override CSS styles, so 

<div class="someclass" style="height: 50px;">...</div>

overrides the rule in your stylesheet. However, it's generally not a good solution to fix this problem. The preferred solution would be to use a selector with a higher specificity in your external css.

Upvotes: 0

LookingLA
LookingLA

Reputation: 456

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.

Upvotes: 6

Jezen Thomas
Jezen Thomas

Reputation: 13800

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.

Upvotes: 1

Related Questions