Como desabilitar a altura máxima?

161

Como redefinir a max-heightpropriedade para o padrão, se ela tiver sido definida anteriormente em alguma regra CSS? Isso não funciona:

pre {
  max-height: 250px;
}

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

Respostas:

306

Redefina-o para none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Referência

Fantasma de Madara
fonte
Apenas uma observação para a qual isso não funciona min-height( nonenão é permitido e resulta na substituição do valor).
Jon
1
@ Jon Isso mesmo, o valor padrão para min-height0 é 0, mas como "Infinity" não é uma coisa em CSS, o max-heightpadrão é none.
Madara's Ghost
24

Você pode limpar o atributo max-height usando o seguinte css:

max-height:none; 
mr_lewjam
fonte
3

Apenas uma observação: se você estiver usando JavaScript para estilizar o elemento, como $el.style.maxHeight = '50px';usar $el.style.maxHeight = 'none';"não redefinirá" ou "removerá" o 50px, ele simplesmente o substituirá. Isso significa que, se você tentar "redefinir" a altura máxima de um elemento, $el.style.maxHeight = 'none';ele aplicará o nonevalor ao parâmetromax-height propriedade do elemento, substituindo outras max-heightpropriedades válidas nas regras de seleção de CSS que correspondem a esse elemento.

Um exemplo:

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 "desabilitar" um estilo embutido, você deve usar $el.style.removeProperty('max-height'); .

Para concluir isso para uma regra de estilo inteira e não apenas um elemento, primeiro você deve encontrar a regra que deseja modificar e, em seguida, chamar a removePropertyfunção nessa regra:

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

Você pode encontrar o StyleSheeteCssRule objetos que desejar, mas para um aplicativo simples, tenho certeza de que os itens acima seriam suficientes.

Desculpe por colocar isso como resposta, mas não tenho 50 representantes, portanto não posso comentar.

Felicidades.

Jexah
fonte
1

Use um

max-height: none;

ou

max-height: 100%;

Nota : o segundo é relativo à altura do bloco que o contém.

thiagowfx
fonte
1
desculpe, mas isso está errado, definindo max-height: 100% é relativo à altura do bloco que o contém. Portanto, limita a altura máxima real.
BiAiB
1

Você pode usar

max-height: unset;

que redefine uma propriedade para seu valor herdado se você estiver herdando de seu pai (funcionará como herança de palavra-chave) e, caso não esteja herdando, ela redefinirá para seu valor inicial (funcionará como inicial de palavra-chave).

Avadhut Thorat
fonte