Wie deaktiviere ich die maximale Höhe?

161

Wie max-heightsetze ich die Eigenschaft auf die Standardeinstellung zurück, wenn sie zuvor in einer CSS-Regel festgelegt wurde? Das funktioniert nicht:

pre {
  max-height: 250px;
}

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

css

— BiAiB
quelle

306

Setzen Sie es zurück auf none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Referenz

— Madaras Geist
quelle

Nur ein Hinweis, für den dies nicht funktioniert min-height( noneist nicht zulässig und führt dazu, dass der Wert nicht überschrieben wird).

— Jon

1

@Jon Richtig, der Standardwert für min-heightist 0, aber da "Infinity" in CSS keine Rolle spielt , wird max-heightstandardmäßig " none.

— Madaras Geist

24

Sie können das Attribut max-height mithilfe des folgenden CSS löschen:

max-height:none;

— mr_lewjam
quelle

3

Nur eine Notiz, wenn Sie JavaScript - Stil das Element verwenden , wie $el.style.maxHeight = '50px';mit $el.style.maxHeight = 'none';nicht „Reset“ oder „Entfernen“ das 50px, wird es einfach überschreiben. Dies bedeutet, dass beim Versuch, die maximale Höhe eines Elements mithilfe $el.style.maxHeight = 'none';dieses Elements "zurückzusetzen" , der noneWert auf die max-heightEigenschaft des Elements angewendet wird und alle anderen gültigen max-heightEigenschaften in CSS-Auswahlregeln überschrieben werden , die diesem Element entsprechen.

Ein Beispiel:

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

Um einen Inline-Stil tatsächlich zu "deaktivieren", sollten Sie verwenden $el.style.removeProperty('max-height');.

Um dies für eine gesamte Stilregel und nicht nur für ein einzelnes Element abzuschließen, sollten Sie zuerst die Regel suchen, die Sie ändern möchten, und dann die removePropertyFunktion für diese Regel aufrufen :

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

Sie finden das StyleSheetundCssRule Objekte finden, wie Sie möchten, aber für eine einfache Anwendung würde das oben Genannte sicher ausreichen.

Es tut mir leid, dass ich dies als Antwort angegeben habe, aber ich habe keine 50 Wiederholungen, daher kann ich keinen Kommentar abgeben.

Prost.

— Jexah
quelle

1

Benutze das eine oder das andere

max-height: none;

oder

max-height: 100%;

Hinweis : Der zweite ist relativ zur Höhe des enthaltenen Blocks.

— thiagowfx
quelle

1

Entschuldigung, aber das ist falsch. Die Einstellung der maximalen Höhe: 100% ist relativ zur Höhe des enthaltenen Blocks. Es begrenzt also die tatsächliche maximale Höhe.

— BiAiB

1

Sie können verwenden

max-height: unset;

Dadurch wird eine Eigenschaft auf ihren geerbten Wert zurückgesetzt, wenn Sie von ihrem übergeordneten Wert erben (funktioniert als Schlüsselwort-Vererbung). Wenn Sie nicht erben, wird sie auf ihren Anfangswert zurückgesetzt (funktioniert als Schlüsselwort-Initiale).

— Avadhut Thorat
quelle