Як зняти максимальну висоту?

161

Як повернути max-heightвластивість до його типового значення, якщо воно було раніше встановлено в якомусь правилі CSS? Це не працює:

pre {
  max-height: 250px;
}

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

css

— BiAiB
джерело

306

Скиньте його на none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Довідково

— Привид Мадари
джерело

Лише зауважте, що це не працює min-height( noneне дозволено, і це призводить до того, що значення не може бути перекрито).

— Іван

1

@Jon Правильно, значення за замовчуванням min-heightдорівнює 0, але оскільки "Infinity" у CSS не є річчю, max-heightза замовчуванням none.

— Привид

24

Ви можете очистити атрибут max-height за допомогою наступного css:

max-height:none;

— mr_lewjam
джерело

3

Просто примітка, якщо ви використовуєте JavaScript для стилю такого елемента $el.style.maxHeight = '50px'; використання$el.style.maxHeight = 'none'; не "скине" або "видалить" 50px, він просто замінить його. Це означає, що якщо ви спробуєте "скинути" максимальну висоту елемента за допомогою $el.style.maxHeight = 'none';нього, він застосує noneзначення до max-heightвластивості елемента, переосмисливши будь-які інші дійсні max-heightвластивості у правилах вибору CSS, які відповідають цьому елементу.

Приклад:

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

Щоб насправді "зняти" стиль вбудованої форми, слід скористатися $el.style.removeProperty('max-height');.

Щоб виконати це для всього правила стилю, а не лише для одного елемента, слід спочатку знайти правило, яке потрібно змінити, а потім викликати removePropertyфункцію за цим правилом:

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

Ви можете знайти StyleSheet і CssRuleоб'єкти, як вам завгодно, але для простого застосування я впевнений, що вищезазначеного буде достатньо.

Вибачте, що поставили це як відповідь, але у мене немає 50 повторень, тому я не можу коментувати.

Ура.

— Джекса
джерело

1

Використовуйте будь-який

max-height: none;

або

max-height: 100%;

Примітка : другий відносно висоти блоку, що містить.

— thiagowfx
джерело

1

Вибачте, але це неправильно, встановивши max-висоту: 100% відносно висоти блоку, що містить. Таким чином, це обмежує фактичну максимальну висоту.

— BiAiB

1

Можна використовувати

max-height: unset;

яка скидає властивість до його успадкованого значення, якщо ви успадковуєте його від батьківського (буде працювати як спадкове слово), а якщо ви не успадковуєте, воно скидає його початкове значення (буде працювати як початкове ключове слово).

— Авадхут Торат
джерело