Come disinserire l'altezza massima?

Come ripristinare la max-heightproprietà sui valori predefiniti, se è stata precedentemente impostata in alcune regole CSS? Questo non funziona:

pre {
  max-height: 250px;
}

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

Ripristina su none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Riferimento

Puoi cancellare l'attributo max-height usando i seguenti css:

max-height:none; 

Solo una nota, se si sta utilizzando Javascript per stile l'elemento come $el.style.maxHeight = '50px';utilizzare $el.style.maxHeight = 'none';non "reset" o "remove" la 50px, sarà semplicemente ignorarlo. Ciò significa che se si tenta di "ripristinare" l'altezza massima di un elemento che lo utilizza $el.style.maxHeight = 'none';applicherà il nonevalore alla max-heightproprietà dell'elemento, sovrascrivendo qualsiasi altra max-heightproprietà valida nelle regole di selezione CSS che corrisponda a quell'elemento.

Un esempio:

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

Per "annullare" effettivamente uno stile incorporato, è necessario utilizzare $el.style.removeProperty('max-height');.

Per completare ciò per un'intera regola di stile e non solo per un singolo elemento, dovresti prima trovare la regola che desideri modificare, quindi chiamare la removePropertyfunzione su quella regola:

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

Puoi trovare il StyleSheeteCssRule oggetti come vuoi, ma per una semplice applicazione sono sicuro che quanto sopra sarebbe sufficiente.

Mi spiace di averlo inserito come risposta, ma non ho 50 rappresentanti quindi non posso commentare.

Saluti.

Usa entrambi

max-height: none;

o

max-height: 100%;

Nota : il secondo è relativo all'altezza del blocco contenitore.

Puoi usare

max-height: unset;

che reimposta una proprietà al suo valore ereditato se si eredita dal suo genitore (funzionerà come eredità della parola chiave) e nel caso in cui non si erediti verrà ripristinata al suo valore iniziale (funzionerà come parola chiave iniziale).