¿Cómo desarmar la altura máxima?

161

¿Cómo restablezco la max-heightpropiedad a su valor predeterminado, si se ha configurado previamente en alguna regla CSS? Esto no funciona:

pre {
  max-height: 250px;
}

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

css

— BiAiB
fuente

306

Restablecer a none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Referencia

— El fantasma de Madara
fuente

Solo una nota de que esto no funciona min-height( noneno está permitido y da como resultado que el valor no se anule).

— Jon

1

@ Jon Así es, el valor predeterminado para min-height0 es, pero como "Infinito" no es una cosa en CSS, el valor max-heightpredeterminado es none.

— El fantasma de Madara

24

Puede borrar el atributo max-height utilizando el siguiente CSS:

max-height:none;

— mr_lewjam
fuente

3

Solo una nota, si está utilizando JavaScript para darle estilo al elemento, el $el.style.maxHeight = '50px';uso $el.style.maxHeight = 'none';no "restablecerá" o "eliminará" el 50px, simplemente lo anulará. Esto significa que si intenta "restablecer" la altura máxima de un elemento que lo usa $el.style.maxHeight = 'none';, aplicará el nonevalor a la max-heightpropiedad del elemento, anulando cualquier otra max-heightpropiedad válida en las reglas de selección CSS que coincidan con ese elemento.

Un ejemplo:

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

Para realmente "desarmar" un estilo en línea, debe usar $el.style.removeProperty('max-height');.

Para completar esto para una regla de estilo completa y no solo para un solo elemento, primero debe encontrar la regla que desea modificar y luego llamar a la removePropertyfunción en esa regla:

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

Puede encontrar los objetos StyleSheety como CssRulequiera, pero para una aplicación simple, estoy seguro de que lo anterior será suficiente.

Perdón por poner esto como respuesta, pero no tengo 50 repeticiones, así que no puedo comentar.

Salud.

— Jexah
fuente

1

Utilizar cualquiera

max-height: none;

o

max-height: 100%;

Nota : el segundo es relativo a la altura del bloque contenedor.

— thiagowfx
fuente

1

lo siento, pero esto es incorrecto, establecer max-height: 100% es relativo a la altura del bloque contenedor. Por lo tanto, limita la altura máxima real.

— BiAiB

1

Puedes usar

max-height: unset;

que restablece una propiedad a su valor heredado si está heredando de su padre (funcionará como palabra clave heredar) y en caso de que no esté heredando se restablecerá a su valor inicial (funcionará como palabra clave inicial).

— Avadhut Thorat
fuente