Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to unset max-height?

Tags:

css

People also ask

How do I reset my max-height?

max-height: unset; which resets a property to its inherited value if you are inheriting from its parent (will work as keyword inherit) and in case you are not inheriting it will resets to its initial value ( will work as keyword initial).

Does height override max-height?

Authors may use any of the length values as long as they are a positive value. max-height overrides height, but min-height always overrides max-height .

How do I get rid of min height?

Conversation. CSS tip: To reset a min-height or min-width declaration, set it to "0", not "auto". For max-height/width, the initial value is "none".


Reset it to none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Reference


You can clear the max-height attribute by using the following css:

max-height:none; 

You can use

max-height: unset;

which resets a property to its inherited value if you are inheriting from its parent (will work as keyword inherit) and in case you are not inheriting it will resets to its initial value ( will work as keyword initial).


Just a note, if you're using JavaScript to style the element like $el.style.maxHeight = '50px'; using $el.style.maxHeight = 'none'; will not "reset" or "remove" the 50px, it will simply override it. This means that if you try to "reset" the max height of an element using $el.style.maxHeight = 'none'; it will apply the none value to the max-height property of the element, overriding any other valid max-height properties in CSS selection rules that match that element.

An example:

styles.css

.set-max-height { max-height: 50px; }

main.js

document.querySelectorAll('.set-max-height').forEach($el => {
  if($el.hasAttribute('data-hidden')){
    $el.style.maxHeight = '0px'; // Set max-height to 0px.
  } else {
    $el.style.maxHeight = 'none'; // 'Unset' max-height according to accepted answer.
});

To actually "unset" an inline style, you should use $el.style.removeProperty('max-height');.

To complete this for an entire style rule and not just a single element, you should first find the rule you want to modify, and then call the removeProperty function on that rule:

for(let i = 0; i < document.styleSheets[0].cssRules.length; ++i){
  if(document.styleSheets[0].cssRules[i].selectorText == '.set-max-height'){
    document.styleSheets[0].cssRules[i].style.removeProperty('max-height');
    break;
  }
}

You can find the StyleSheet and CssRule objects however you want, but for a simple application I'm sure the above would suffice.

Sorry for putting this as an answer, but I don't have 50 rep so I can't comment.

Cheers.


Use either

max-height: none;

or

max-height: 100%;

Note: the second one is relative to the height of the containing block.