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).
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 .
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With