Jak wyłączyć maksymalną wysokość?

161

Jak zresetować max-heightwłaściwość do jej wartości domyślnej, jeśli została wcześniej ustawiona w jakiejś regule CSS? To nie działa:

pre {
  max-height: 250px;
}

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

css

— BiAiB
źródło

306

Zresetuj do none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Odniesienie

— Duch Madary
źródło

Tylko uwaga, dla której to nie działa min-height( nonejest niedozwolone i powoduje, że wartość nie jest zastępowana).

— Jon

1

@Jon Zgadza się, domyślna wartość dla min-heightto 0, ale ponieważ „Nieskończoność” nie jest rzeczą w CSS, max-heightdomyślnie jest to none.

— Madara's Ghost

24

Możesz wyczyścić atrybut max-height, używając następującego css:

max-height:none;

— mr_lewjam
źródło

3

Uwaga, jeśli używasz JavaScript do stylizacji elementu, tak jak $el.style.maxHeight = '50px';using $el.style.maxHeight = 'none';nie "zresetuje" ani "usunie" elementu 50px, po prostu go zastąpi. Oznacza to, że jeśli spróbujesz „zresetować” maksymalną wysokość elementu używając $el.style.maxHeight = 'none';go, zastosuje nonewartość do max-heightwłaściwości elementu, nadpisując wszelkie inne prawidłowe max-heightwłaściwości w regułach wyboru CSS, które pasują do tego elementu.

Przykład:

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

Aby faktycznie "usunąć" styl wbudowany, powinieneś użyć $el.style.removeProperty('max-height');.

Aby zakończyć to dla całej reguły stylu, a nie tylko pojedynczego elementu, należy najpierw znaleźć regułę, którą chcesz zmodyfikować, a następnie wywołać removePropertyfunkcję na tej regule:

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

Możesz znaleźć StyleSheetiCssRule obiekty, jak chcesz, ale dla prostej aplikacji jestem pewien, że powyższe wystarczy.

Przepraszam za podanie tego jako odpowiedzi, ale nie mam 50 powtórzeń, więc nie mogę komentować.

Twoje zdrowie.

— Jexah
źródło

1

Użyj albo

max-height: none;

lub

max-height: 100%;

Uwaga : drugi dotyczy wysokości bloku zawierającego.

— thiagowfx
źródło

1

przepraszam, ale to źle, ustawienie max-height: 100% jest zależne od wysokości bloku zawierającego. Więc ogranicza rzeczywistą maksymalną wysokość.

— BiAiB

1

Możesz użyć

max-height: unset;

która resetuje właściwość do jej odziedziczonej wartości, jeśli dziedziczysz z jej elementu nadrzędnego (będzie działać jako dziedziczenie słowa kluczowego), a jeśli nie dziedziczysz, zresetuje ją do wartości początkowej (będzie działać jako słowo kluczowe).

— Avadhut Thorat
źródło