Bagaimana cara mengatur max-height?

161

Bagaimana cara saya mereset max-heightproperti ke default, jika sebelumnya telah diatur dalam beberapa aturan CSS? Ini tidak berfungsi:

pre {
  max-height: 250px;
}

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

css

— BiAiB
sumber

306

Atur ulang ke none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Referensi

— Hantu Madara
sumber

Hanya catatan bahwa ini tidak berhasil min-height( nonetidak diizinkan dan menghasilkan nilai yang tidak ditimpa).

— Jon

1

@ Jon Itu benar, nilai default untuk min-heightadalah 0, tetapi karena "Infinity" bukanlah sesuatu di CSS, max-heightdefault ke none.

— Hantu Madara

24

Anda dapat menghapus atribut max-height dengan menggunakan css berikut:

max-height:none;

— mr_lewjam
sumber

3

Hanya sebuah catatan, jika Anda menggunakan JavaScript untuk menata elemen seperti $el.style.maxHeight = '50px';menggunakan $el.style.maxHeight = 'none';tidak akan "mengatur ulang" atau "menghapus" 50px, itu hanya akan menimpanya. Ini berarti bahwa jika Anda mencoba "mengatur ulang" ketinggian maksimal suatu elemen yang menggunakannya, $el.style.maxHeight = 'none';ia akan menerapkan nonenilai pada max-heightproperti elemen tersebut, mengabaikan semua max-heightproperti valid lainnya dalam aturan pemilihan CSS yang cocok dengan elemen itu.

Sebuah contoh:

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

Untuk benar-benar "membatalkan" gaya inline, Anda harus menggunakan $el.style.removeProperty('max-height');.

Untuk menyelesaikan ini untuk seluruh aturan gaya dan bukan hanya elemen tunggal, Anda harus terlebih dahulu menemukan aturan yang ingin Anda modifikasi, dan kemudian memanggil removePropertyfungsi pada aturan itu:

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

Anda dapat menemukan StyleSheetdan CssRuleobjek sesuka Anda, tetapi untuk aplikasi sederhana saya yakin di atas sudah cukup.

Maaf karena menempatkan ini sebagai jawaban, tapi saya tidak punya 50 perwakilan jadi saya tidak bisa berkomentar.

Bersulang.

— Jexah
sumber

1

Gunakan salah satunya

max-height: none;

atau

max-height: 100%;

Catatan : yang kedua relatif terhadap ketinggian blok yang mengandung.

— thiagowfx
sumber

1

maaf tapi ini salah, pengaturan max-height: 100% relatif terhadap tinggi blok yang mengandung. Jadi itu membatasi tinggi maks sebenarnya.

— BiAiB

1

Kamu bisa memakai

max-height: unset;

yang me-reset properti ke nilai yang diwarisi jika Anda mewarisi dari induknya (akan berfungsi sebagai pewarisan kata kunci) dan jika Anda tidak mewarisi akan me-reset ke nilai awalnya (akan berfungsi sebagai kata kunci awal).

— Avadhut Thorat
sumber