css gaya teks (4)

Tanpa konten, tinggi badan tidak menjadi masalah dalam penghitungan persentase. Namun, lebarnya akan mengambil persentase dari DOM jika tidak ada induk yang ditentukan. (Menggunakan contoh Anda) Menempatkan div kedua di dalam div pertama akan mendapatkan hasil... contoh di bawah...

Div kedua akan menjadi 30% dari tinggi div pertama.

Mengapa nilai persentase untuk tinggi tidak berfungsi, tetapi nilai persentase untuk lebar?

Lebar #working adalah 80% dari viewport, namun tinggi #not-working berakhir pada 0.

Anda perlu memberinya wadah dengan ketinggian. lebar menggunakan area pandang sebagai lebar default

Pilihan lainnya adalah menambahkan gaya pada div

Artinya, unsur tersebut diposisikan relatif terhadap nenek moyang terdekatnya.

Nilai persentase pada properti tinggi memiliki sedikit komplikasi, dan properti lebar dan tinggi sebenarnya berperilaku berbeda satu sama lain. Izinkan saya mengajak Anda melihat spesifikasinya.

tinggi:

mengandung dihasilkan memblokir. Jika tinggi blok yang memuatnya tidak ditentukan secara eksplisit (yaitu, bergantung pada tinggi konten) dan elemen tersebut tidak diposisikan secara mutlak, nilainya dihitung menjadi "otomatis". Persentase tinggi elemen akar relatif terhadap blok berisi awal. Catatan. Untuk elemen yang diposisikan secara absolut yang berisi blok berdasarkan elemen tingkat blok, persentasenya dihitung relatif terhadap tinggi bantalan elemen tersebut.

Oke, mari kita lakukan langkah demi langkah:

Persentasenya dihitung relatif terhadap tinggi balok, mengandung dihasilkan memblokir .

Persentasenya dihitung berdasarkan lebar blok dari blok yang dihasilkan.

Lihatlah contoh-contoh umum ini, yang dikerjakan ulang dari contoh sebelumnya untuk mengubah lebar, bukan tinggi:

• 50% lebar:200 piksel 200 piksel - 100 piksel jika #cc
• 50% width:auto adalah 50% dari apa pun yang width:auto hasilnya, tidak seperti height, tidak ada aturan khusus yang menangani kasus ini secara berbeda.

Sekarang inilah bagian rumitnya: auto memiliki arti yang berbeda tergantung pada apakah itu ditentukan untuk width atau height ! Untuk tinggi, ini berarti tinggi yang dibutuhkan agar sesuai dengan konten*, tetapi untuk lebar otomatis sebenarnya lebih rumit. Anda dapat melihat dari cuplikan kode bahwa dalam hal ini ternyata adalah lebar viewport.

Lebarnya bergantung pada nilai properti lainnya. Lihat bagian di bawah.

Wah, itu tidak membantu. Untuk menghindari masalah, saya menemukan bagian yang relevan dalam kasus penggunaan kami, berjudul "Menghitung lebar dan margin", dengan subjudul "tingkat blok, elemen yang tidak dapat diubah dalam aliran normal":

Nilai yang digunakan untuk properti lain harus mencakup batasan berikut:

"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" = lebar blok yang memuatnya

Oke, jadi lebar ditambah batas, batas, dan batas bantalan yang sesuai harus dijumlahkan dengan lebar blok yang memuatnya (dan Bukan keturunan, cara kerja tinggi badan). Saran lain:

Jika "lebar" disetel ke "otomatis", nilai "otomatis" lainnya menjadi "0" dan "lebar" mengikuti persamaan yang dihasilkan.

Ya! Jadi dalam hal ini, 50% width:auto adalah 50% dari viewport. Semoga semuanya akhirnya masuk akal sekarang!

* Setidaknya sama pentingnya dalam kasus ini. spec Oke, sekarang semuanya masuk akal.

Dengan tata letak blok, hal ini sering kali diperlukan buat tinggi blok div 100%. Dengan indikasi sederhana tinggi = 100% V div Anda tidak akan bisa mencapai hasil yang diinginkan, jadi ada teknik tertentu, yang akan saya bahas di artikel ini.

Sebelum saya menyajikan kodenya, saya akan menjelaskan cara kerjanya. Esensinya adalah untuk menunjukkan height=100% untuk semua blok induk, termasuk html. Misalnya, kode ini memungkinkan Anda melakukannya div dengan tinggi 100%:

Akibatnya, keduanya div akan menjadi 100% tinggi. Harap dicatat bahwa jika Anda menghapus tinggi html 100%, maka tidak akan ada hasilnya. Begitu pula jika di atas div menyimpan tinggi 100%, dan tinggalkan yang dalam, maka yang dalam tidak akan bersama 100% tinggi. Artinya, ingatlah untuk melakukannya membuat div dengan tinggi 100%, Anda perlu membuat setiap blok induk dengan tinggi 100%..

Jika Anda memiliki pertanyaan atau ingin mengomentari artikel ini, Anda dapat meninggalkan komentar Anda di bagian bawah halaman.

Komentar (6):

03.05.2013 20:37:02

Mikhail, saya melakukannya seperti yang Anda lakukan, tetapi ketika Anda memanjangkan balok tengah, balok kanan tidak bertambah

Menjawab

03.05.2013 21:55:51

Mahail! Saya mencoba metode yang diusulkan - berhasil, tetapi dengan peringatan bahwa blok div yang tingginya diatur ke 100% tidak boleh lebih tinggi dari jendela browser. Jika tinggi blok tidak sesuai dengan jendela browser, maka blok tersebut tidak akan sepenuhnya diwarnai dengan warna latar belakang. Hanya bagian blok yang sesuai dengan jendela browser yang akan diwarnai dengan warna latar belakang. Berikut ini kodenya misalnya.

Keterangan

Menetapkan ketinggian maksimum suatu elemen. Nilai tinggi elemen akan dihitung tergantung pada nilai properti tinggi, tinggi maks, dan tinggi minimum yang ditetapkan. Dalam tabel Gambar 1 menunjukkan apa yang memandu browser saat berbagi properti gaya ini.

Data dari tabel harus dipahami sebagai berikut. Jika nilai tinggi (height) lebih besar dari nilai max-height, maka tinggi elemen diasumsikan sama dengan nilai max-height.

Sintaksis

tinggi maksimal: nilai | minat | tidak ada | mewarisi

Nilai-nilai

Nilai yang diterima adalah piksel (px), persentase (%) dan satuan pengukuran lain yang diterima di CSS. Nilai negatif tidak diperbolehkan.

Tidak Ada Menonaktifkan properti ini.

mewarisi Mewarisi nilai orang tua.

Bidang yang diblokir biasanya ditandai dengan warna abu-abu

Beberapa browser mengizinkan Anda memilih dan menyalin konten bidang teks yang terkunci, namun semua tindakan lainnya dinonaktifkan.

Model objek

dokumen.getElementById("elementID ").style.maxHeight

Peramban

Versi Internet Explorer hingga dan termasuk 7.0 tidak mendukung nilai warisan.