Min dan Max lebar / properti tinggi di CSS

Terjemahan " Lebar Min dan Maks / Tinggi dalam CSS " oleh Ahmad Shadid.

Terkadang pengembang perlu membatasi lebar elemen relatif terhadap induknya, dan pada saat yang sama, membiarkannya dinamis. Dengan mengatur cara ini ukuran awal dengan kemungkinan ekspansi jika ada ruang yang tersedia. Sebagai contoh, kita memerlukan tombol yang memiliki lebar minimum. Dalam situasi seperti itu nyaman untuk menggunakan properti maksimum dan minimum.

Pada artikel ini, kami akan membiasakan diri dengan properti CSS maksimum dan minimum untuk lebar dan tinggi, dan juga melihat secara terperinci masing-masing dari mereka dan kasus penggunaannya.

Properti Lebar

Saya ingin memulai diskusi dengan properti yang terkait dengan lebar. Kami memiliki min-width dan max-width, dan masing-masingnya sangat penting dan berguna dalam situasi tertentu.

Lebar minimum (lebar minimum)

Properti min-width dimaksudkan untuk mencegah lebar elemen dikurangi di bawah nilai yang ditentukan. Nilai defaultnya adalah auto , yang bisa mencapai 0 .

Untuk mendemonstrasikannya, mari kita lihat contoh dasar:



Ada tombol dengan teks, yang ukurannya dapat bervariasi dari satu hingga beberapa kata. Untuk memastikan bahwa tombol ini akan memiliki lebar minimum yang diijinkan, bahkan jika hanya ada satu kata di dalamnya, Anda harus menggunakan min-width . Lebar minimum ditetapkan ke 100px, jadi bahkan jika tombol memiliki konten yang sangat pendek, seperti hanya kata "Selesai" atau hanya sebuah ikon, itu masih akan cukup besar untuk tetap terlihat. Ini sangat penting ketika Anda bekerja dengan situs yang diterjemahkan ke dalam berbagai bahasa.

Pertimbangkan contoh bahasa Arab di Twitter:



Pada contoh di atas, tombol berisi kata "تم", yang dalam bahasa Arab berarti "Selesai". Karena konten pendek, lebar tombol itu sendiri menjadi terlalu kecil, jadi saya mengatur minimum dengan mengatur properti min-width , yang dapat dilihat pada gambar di sebelah kanan (di bagian "Setelah").

Lebar dan Padding Minimum

Meskipun properti min-width memungkinkan peningkatan lebar tombol sekaligus meningkatkan ukuran kontennya, padding harus tetap dipasang di sisi untuk menjamin indentasi dari perbatasannya. Perbedaannya ditunjukkan pada gambar di bawah ini.

Lebar maksimum (maksimum-lebar)

Properti max-width dirancang untuk mencegah elemen meluas melampaui nilai yang ditentukan. Nilai default none .

Contoh umum dan sederhana menggunakan max-width adalah menerapkannya pada gambar. Perhatikan contoh di bawah ini:



Jika kita menerapkan properti max-width: 100% ke gambar, itu akan tetap dalam batas-batas elemen induk, meskipun ukuran aslinya lebih besar. Jika gambar awalnya lebih kecil dari induknya, properti ini tidak akan memengaruhinya dengan cara apa pun.

Menggunakan min-width dan max-width

Jika kedua properti berlaku untuk suatu elemen, yang mana akan menimpa nilai yang lain? Dengan kata lain, properti mana yang memiliki prioritas lebih tinggi?

Jika nilai min-width lebih besar dari max-width , itu akan dianggap sebagai lebar elemen. Perhatikan contoh berikut:

HTML

 <div class="wrapper"> <div class="sub"></div> </div> 

CSS

 .sub { width: 100px; min-width: 50%; max-width: 100%; } 

Nilai width awal adalah 100px dan di samping itu, properti min-width dan max-width diatur. Akibatnya, lebar elemen ini tidak akan melebihi 50% dari lebar blok induk

Sifat tinggi

Selain properti lebar minimum dan maksimum, ada properti yang sama untuk tinggi

Tinggi minimum (min-height)

Properti min-height dirancang untuk mencegah elemen jatuh di bawah nilai yang ditentukan. Nilai defaultnya adalah auto , yang bisa mencapai 0 .

Untuk mendemonstrasikannya, mari kita lihat contoh sederhana.

Kami memiliki bagian dengan konten teks. Diperlukan agar terlihat cantik dengan teks dalam jumlah besar dan kecil



CSS

 .sub { display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 100px; color: #fff; background: #3c78dB; } 

Tinggi minimum diatur ke 100px, dan konten dipusatkan menggunakan flexbox secara horizontal dan vertikal. Apa yang terjadi jika ada lebih banyak konten? Misalnya, akan ada seluruh paragraf



Ya, Anda sudah menebaknya. Tinggi bagian akan meningkat untuk mengakomodasi lebih banyak konten. Dengan ini, kami dapat membuat komponen fleksibel yang merespons jumlah konten.

Tinggi maksimum (tinggi-maksimum)

Properti max-height dirancang untuk mencegah suatu elemen menambah tinggi melebihi nilai yang ditentukan. Nilai default none .

Dalam contoh berikut ini, saya mengatur max-height konten. Tetapi karena lebih besar dari area yang ditentukan, terjadi overflow dan teks melampaui batas elemen induk

Contoh Penggunaan Properti

Pertimbangkan beberapa kasus penggunaan umum dan langka untuk properti min-width , min-height , max-width , dan max-height .

Daftar tag

Disarankan untuk menunjukkan lebar minimum setiap tag dalam daftar tag sehingga penampilannya tidak berkurang jika terjadi konten pendek.



Dengan fleksibilitas seperti itu, sebuah tag akan terlihat bagus tidak peduli seberapa pendek isinya. Tetapi apa yang terjadi jika penulis menetapkan nama tag yang sangat besar, dan CMS (sistem manajemen konten) yang ia gunakan tidak memiliki batasan jumlah karakter dalam tag? Dalam situasi ini, Anda juga dapat menggunakan max-width

CSS

 .c-tag { display: inline-block; min-width: 100px; max-width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /*Other styles*/ } 

Menggunakan max-width Anda dapat membatasi lebar maksimum ke nilai tertentu. Namun, menerapkan properti ini saja tidak cukup. Konten yang melebihi lebar maksimum harus dipotong.

https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16

Tombol

Ada berbagai skenario untuk menggunakan properti minimum dan maksimum untuk tombol, karena ada juga banyak pilihan untuk komponen tombol. Pertimbangkan tata letak berikut:



Harap dicatat bahwa lebar tombol "Get" terlalu kecil. Jika karena alasan tertentu tombol masih tidak memiliki teks (tetapi hanya ikon), semuanya bisa menjadi lebih buruk. Dalam hal ini, pengaturan lebar minimum sangat penting

Mengabaikan lebar minimum untuk Flexbox

Nilai default dari properti min-width adalah otomatis, yang mengevaluasi ke nol. Ketika item adalah item fleksibel, nilai min-width tidak menjadi nol. Ukuran minimum elemen fleksibel adalah ukuran isinya.

Menurut CSSWG :
Secara default, item fleksibel tidak menjadi lebih kecil dari ukuran minimum yang diperlukan oleh kontennya (panjang kata atau item terpanjang dengan ukuran tetap). Untuk mengubahnya, setel properti min-width atau min-height .

Perhatikan contoh berikut:



Nama pengguna berisi kata yang sangat panjang yang menyebabkan overflow dan pengguliran horizontal. Meskipun saya menambahkan CSS di bawah ini untuk memotong konten:

CSS

 .c-person__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

Karena header adalah elemen fleksibel, solusinya adalah mengatur ulang nilai min-width dan menjadikannya nol

CSS

 .c-person__name { /*Other styles*/ min-width: 0; } 

Berikut ini tampilannya setelah perbaikan:



Ini mengikuti dari deskripsi CSSWG bahwa mengatur properti overflow ke nilai selain yang visible dapat menyebabkan nilai min-width dihitung sebagai nol, yang juga memecahkan masalah kita tanpa harus secara eksplisit mengatur min-width: 0 .

Nol Tinggi Minimum untuk Flexbox

Meskipun ini adalah masalah yang kurang umum dibandingkan dengan min-width, itu masih bisa terjadi. Masalahnya dengan item fleksibel yang tidak bisa lebih pendek dari kontennya. Akibatnya, nilai min-height diatur sama dengan ukuran konten.

Perhatikan contoh berikut:



Teks berwarna merah harus dipangkas oleh batas-batas wadah. Tetapi karena elemen ini adalah elemen lentur, min-height minimumnya sama dengan tinggi konten. Untuk mencegahnya, kita harus mengatur ulang nilai tinggi minimum. Mari kita lihat kode HTML dan CSS:

HTML

 <div class="c-panel"> <h2 class="c-panel__title"><!-- Title --></h2> <div class="c-panel__body"> <div class="c-panel__content"><!-- Content --></div> </div> </div> 

CSS

 .c-panel { display: flex; flex-direction: column; height: 180px; } .c-panel__body { min-height: 0; } .c-panel__content { overflow-y: scroll; height: 100%; } 

Menambahkan min-height: 0 elemen min-height: 0 akan mereset nilai properti dan itu akan mulai berfungsi seperti yang diharapkan
Demo

Menggunakan min-width dan max-width secara bersamaan

Terkadang ada situasi ketika kita memiliki elemen dengan lebar minimum, tetapi pada saat yang sama, lebar maksimum tidak ditentukan. Ini dapat menyebabkan elemen menjadi terlalu luas, meskipun perilaku ini tidak dimaksudkan. Perhatikan contoh berikut:



Karena lebar didefinisikan dalam piksel, tidak ada kepastian bahwa di atas akan berfungsi untuk seluler. Untuk mengatasi masalah ini, kita dapat menggunakan persentase alih-alih piksel untuk properti minimum dan maksimum. Perhatikan contoh di bawah ini:

Saya menambahkan CSS berikut untuk gambar:

CSS

 img { min-width: 35%; max-width: 70%; } 

Kontainer Halaman

Salah satu skenario paling berguna untuk menggunakan properti max-width adalah membungkus halaman (atau wadah). Dengan mengatur halaman ke lebar maksimum, kami dapat memastikan bahwa akan nyaman bagi pengguna untuk melihat dan membaca konten



Di bawah ini adalah contoh pembungkus terpusat yang memiliki padding kiri dan kanan

CSS

 .wrapper { max-width: 1170px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; } 

Lebar maksimum dan satuan ukuran "ch"

Satuan ukuran ch sama dengan lebar karakter 0 (nol) yang digunakan dalam font elemen saat ini. Menggunakannya di properti max-width, kita dapat menyesuaikan jumlah karakter dalam sebuah string. Menurut artikel dari Smashing Magazine ini, panjang garis yang disarankan adalah 45 hingga 75 karakter.

Pada contoh sebelumnya dengan elemen pembungkus, kita dapat mengambil manfaat dari penggunaan simbol ini, karena ini adalah elemen artikel

CSS

 .wrapper { max-width: 70ch; /* Other styles */ } 

Hidupkan elemen dengan ketinggian yang tidak diketahui

Terkadang kita dihadapkan dengan masalah menjiwai akordeon atau menu seluler dengan ketinggian konten yang tidak diketahui. Dalam hal ini, menggunakan max-height mungkin merupakan solusi yang baik.

Perhatikan contoh berikut:



Ketika tombol menu ditekan, menu itu sendiri akan muncul dengan lancar dari atas ke bawah. Tidak mungkin untuk melakukan ini tanpa JavaScript, kecuali elemen memiliki ketinggian tetap (dan ini tidak disarankan). Namun, ini dimungkinkan dengan ketinggian maksimal. Idenya adalah untuk menambahkan tinggi yang sangat tinggi ke elemen, misalnya, max-height: 20rem , yang tidak akan tercapai, setelah itu kita dapat mengatur langkah-langkah animasi dari max-height: 0 , ke max-height: 20rem

CSS

 .c-nav { max-height: 0; overflow: hidden; transition: 0.3s linear; } .c-nav.is-active { max-height: 22rem; } 

Klik pada hamburger untuk melihat animasi beraksi

Tinggi minimum untuk bagian atas (pahlawan)

Seperti yang Anda lihat, saya tidak suka memberi elemen ketinggian tetap. Saya merasa bahwa dengan melakukan itu saya menentang konsep bahwa komponen di web harus fleksibel. Menambahkan tinggi minimum untuk bagian pertama situs (bagian "pahlawan") berguna dalam situasi di mana konten yang sangat besar ditambahkan (ini terjadi).

Perhatikan contoh berikut, di mana kita memiliki bagian "pahlawan" dengan ketinggian tetap. Itu terlihat bagus.



Namun, ketika konten tumbuh, itu meluap wadah dan melampaui pembungkus bagian. Ini buruk.



Untuk menghindari masalah ini sebelumnya, kami dapat menambahkan min-height bukan min-height . Kami melakukan hal itu, setidaknya untuk menjernihkan hati nurani kami. Meskipun ini mungkin menjadi alasan untuk tampilan halaman yang agak aneh, saya percaya bahwa situasi seperti itu harus dicegah sejak awal, dalam sistem manajemen konten (CMS). Setelah itu, masalah diperbaiki dan halaman terlihat bagus:



Masalah meluap-luap dengan konten tidak hanya itu bisa lebih besar dari ketinggian tetap induknya. Ini dapat terjadi sebagai akibat dari penurunan ukuran layar dan, sebagai akibatnya, peningkatan ketinggian konten teks karena tanda hubung:



Jika Anda menentukan bukan ketinggian tetap, tetapi hanya membatasi hingga minimum menggunakan min-height minimum, masalah yang dijelaskan di atas tidak akan terjadi sama sekali.

Jendela modal

Untuk komponen modal window, Anda harus menentukan lebar minimum dan maksimum, oleh karena itu, ini akan berfungsi pada layar dengan ukuran berapa pun (dari ponsel ke desktop). Ini mengingatkan kita pada artikel menarik tentang Trik-CSS, yang menceritakan apa yang harus dilakukan dalam kasus ini.

1 arah

 .c-modal__body { width: 600px; max-width: 100%; } 

2 arah

 .c-modal__body { width: 100%; max-width: 600px; } 

Sedangkan saya, saya lebih suka cara kedua, karena saya hanya perlu mendefinisikan max-width: 600px . Modal window adalah elemen div , jadi sudah memiliki set lebar = 100% dari induknya, bukan?

Pertimbangkan contoh jendela modal di bawah ini. Perhatikan bagaimana lebar menjadi 100% dari lebar induk jika tidak ada cukup ruang kosong di viewport

Tinggi minimum dan catatan kaki lengket

Ketika konten halaman tidak cukup besar, footer diharapkan tidak menempel di bagian bawah. Mari kita lihat contoh yang menunjukkan hal ini dengan lebih baik:



Harap dicatat bahwa footer tidak menempel ke tepi bawah jendela browser. Ini karena ketinggian konten kurang dari ketinggian jendela browser. Setelah menyelesaikan masalah ini, halaman akan terlihat seperti ini:



Pertama, saya membuat elemen tubuh wadah fleksibel, dan kemudian mengaturnya ke ketinggian minimum 100% dari viewport.

CSS

 body { display: flex; flex-direction: column; min-height: 100vh; } footer { margin-top: auto; } 

Saya sarankan membaca artikel ini di footer lengket.
Demo

Ukuran elemen proporsional dan lebar maks / tinggi

Untuk membuat wadah proporsional yang berskala tergantung pada ukuran viewport, retas pernah disajikan menggunakan padding . Sekarang kita dapat mensimulasikan perilaku serupa dengan menggabungkan unit viewport dan lebar / tinggi maksimum.

Berdasarkan bahan dari sebuah artikel oleh Miriam Suzanne, saya ingin menjelaskan cara kerjanya.



Kami memiliki gambar dengan dimensi 644 x 1000 piksel. Kita perlu melakukan hal berikut:

• Rasio aspek: height / width (tinggi dibagi dengan lebar)
  
• Lebar Kontainer: dapat diperbaiki atau dinamis (100%)
  
• Atur height hingga 100% dari lebar viewport dikalikan dengan rasio aspek
  
• Tetapkan max-height sama dengan rasio aspek kali lebar wadah
  
• Atur max-width sama dengan lebar kontainer
  

CSS

 img { --ratio: 664 / 1000; --container-width: 30em; display: block; height: calc(100vw * var(--ratio)); max-height: calc(var(--container-width) * var(--ratio)); width: 100%; max-width: var(--container-width); } 

HTML / Badan dengan tinggi 100%

Bagaimana jika kita ingin elemen tubuh menempati 100% dari ketinggian viewport? Ini adalah pertanyaan umum baik di komunitas web secara keseluruhan maupun di situs StackOverflow pada khususnya.

Pertama, Anda perlu mengatur height: 100% ke elemen html . Ini akan memastikan bahwa elemen root 100% tinggi. Kemudian tambahkan min-height untuk elemen body . Alasan min-height digunakan adalah karena properti ini memungkinkan tinggi elemen body menjadi dinamis, dan menyesuaikan seberapa besar kontennya

CSS

 html { height: 100%; } body { min-height: 100%; } 

Demo

Catatan

Lebar minimum dan elemen blok

Terkadang kita lupa bahwa elemen yang kita coba terapkan min-width adalah blok. Pada akhirnya, ini bisa membingungkan dan tidak mempengaruhi elemen. Pastikan barang itu tidak kuning

Fungsi perbandingan CSS

Saat meneliti tentang StackOverflow masalah utama yang dihadapi pengembang, saya menemukan pertanyaan ini di mana penulis menanyakan hal berikut:

Apakah mungkin melakukan hal seperti ini? max-width: calc(max(500px, 100% - 80px)) atau mungkin ini max-width: max(500px, calc(100% - 80px)))

Perilaku yang diinginkan adalah menjaga lebar elemen tidak lebih dari 500px. Jika lebar ruang lingkup tidak cukup untuk mengakomodasi elemen, maka lebar harus 100% – 80px .

Adapun solusi yang diterbitkan dalam menanggapi pertanyaan, saya mencoba menerapkannya dan berfungsi di Chrome 79 dan Safari 13.0.3. Meskipun ini di luar ruang lingkup artikel, saya masih akan memberikan solusi di sini:

CSS

 .yourselector { max-width: calc(100% - 80px); } /* Update: I changed the max-width from 500px to 580px. Thanks @fvsch */ @media screen and (max-width: 580px) { .yourselector { max-width: 500px; } } 

Sumber dan bahan untuk studi lebih lanjut

• Item fleksibel dan lebar minimum: 0 oleh Dominic McPhee
• CSS: Flex dan "min-width" oleh Dominik Schöler
• Flexbugs oleh Philip Walton