Maksimum yükseklik nasıl ayarlanır?

161

max-heightDaha önce bazı CSS kurallarında ayarlanmışsa özelliği varsayılana nasıl sıfırlarım ? Bu işe yaramaz:

pre {
  max-height: 250px;
}

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

css

— BiAiB
kaynak

306

Şuna sıfırla none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Referans

— Madara'nın Hayaleti
kaynak

Bunun işe yaramadığına dikkat edin min-height( noneizin verilmez ve değerin geçersiz kılınmasına neden olmaz).

— Jon

1

@Jon Doğru, varsayılan değeri min-height0, ancak "Sonsuzluk" CSS'de bir şey olmadığından, max-heightvarsayılan olarak none.

— Madara'nın Hayaleti

24

Aşağıdaki css kullanarak max-height özelliğini temizleyebilirsiniz:

max-height:none;

— mr_lewjam
kaynak

3

Gibi stiline elemanı JavaScript kullanıyorsanız Sadece bir nota $el.style.maxHeight = '50px';kullanarak $el.style.maxHeight = 'none';"reset" olmaz ya da "kaldırma" 50px, sadece onu geçersiz kılacaktır. Bu, öğeyi kullanarak bir öğenin maksimum yüksekliğini "sıfırlamaya" çalışırsanız $el.style.maxHeight = 'none';, nonedeğeri max-heightöğenin özelliğine uygular ve max-heightbu öğeyle eşleşen CSS seçim kurallarındaki diğer geçerli özellikleri geçersiz kılar .

Bir örnek:

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

Satır içi bir stili gerçekten "çözmek" için kullanmalısınız $el.style.removeProperty('max-height');.

Bunu, yalnızca tek bir öğe için değil, tüm stil kuralı için tamamlamak için, önce değiştirmek istediğiniz kuralı bulmalı ve ardından removePropertybu kuraldaki işlevi çağırmalısınız :

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

İstediğiniz gibi StyleSheetve CssRulenesneleri bulabilirsiniz , ancak basit bir uygulama için yukarıdakilerin yeterli olacağından eminim.

Bunu cevap olarak verdiğim için üzgünüm, ama 50 temsilcim yok, bu yüzden yorum yapamam.

Şerefe.

— Jexah
kaynak

1

Either "kalıbını kullanınız

max-height: none;

veya

max-height: 100%;

Not : ikincisi içeren bloğun yüksekliğine göredir.

— thiagowfx
kaynak

1

üzgünüm ama bu yanlış, maksimum yükseklik ayarı:% 100 içeren bloğun yüksekliğine göredir. Böylece gerçek maksimum yüksekliği sınırlar.

— BiAiB

1

Kullanabilirsiniz

max-height: unset;

üst öğeden miras alıyorsanız (anahtar kelime miras olarak çalışır) bir mülkü devralınan değerine sıfırlar ve devralmadığınız takdirde başlangıç değerine sıfırlanır (anahtar kelime başlangıcı olarak çalışır).

— Avadhut Thorat
kaynak