Comment désactiver la hauteur maximale?

Comment réinitialiser la max-heightpropriété à sa valeur par défaut, si elle a été précédemment définie dans une règle CSS? Cela ne fonctionne pas:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: auto; // Doesn't work at least in Chrome
}

Réinitialisez-le sur none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Référence

Vous pouvez effacer l'attribut max-height à l'aide du CSS suivant:

max-height:none; 

Juste une note, si vous utilisez JavaScript pour styliser l'élément comme $el.style.maxHeight = '50px';utiliser $el.style.maxHeight = 'none';ne "réinitialise" ou "supprime" pas le 50px, il le remplacera simplement. Cela signifie que si vous essayez de "réinitialiser" la hauteur maximale d'un élément en l'utilisant $el.style.maxHeight = 'none';, la nonevaleur sera appliquée à la max-heightpropriété de l'élément, remplaçant toute autre max-heightpropriété valide dans les règles de sélection CSS qui correspondent à cet élément.

Un exemple:

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.
});

Pour "annuler" réellement un style en ligne, vous devez utiliser $el.style.removeProperty('max-height');.

Pour compléter cela pour une règle de style entière et pas seulement un seul élément, vous devez d'abord trouver la règle que vous souhaitez modifier, puis appeler la removePropertyfonction sur cette règle:

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;
  }
}

Vous pouvez trouver les objets StyleSheetet CssRulecomme vous le souhaitez, mais pour une application simple, je suis sûr que ce qui précède suffirait.

Désolé d'avoir mis cela comme réponse, mais je n'ai pas 50 représentants, donc je ne peux pas faire de commentaire.

À votre santé.

Utilisez soit

max-height: none;

ou

max-height: 100%;

Remarque : le second est relatif à la hauteur du bloc conteneur.

Vous pouvez utiliser

max-height: unset;

qui réinitialise une propriété à sa valeur héritée si vous héritez de son parent (fonctionnera comme héritage de mot-clé) et si vous n'héritez pas, elle sera réinitialisée à sa valeur initiale (fonctionnera comme mot-clé initial).