masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menetapkan Ketinggian Div kepada 100% Semasa Mengekalkan DOCTYPE?

Bagaimanakah Saya Boleh Menetapkan Ketinggian Div kepada 100% Semasa Mengekalkan DOCTYPE?

Barbara Streisand

Lepaskan： 2024-12-27 19:59:15

asal

162 orang telah melayarinya

How Can I Set a Div's Height to 100% While Maintaining a DOCTYPE?

Harta Ketinggian CSS, Nilai Peratusan dan DOCTYPE

Menetapkan Ketinggian Div kepada 100%

Untuk mengisi div dengan ketinggian 100% tanpa mengalih keluar DOCTYPE, isytiharkan ketinggian pada akar elemen:

html { height: 100%; }

Salin selepas log masuk

Mod Quirks dan Ketinggian Peratusan

Mengalih keluar DOCTYPE menukar penyemak imbas daripada mod standard kepada mod quirks. Dalam mod kebiasaan, peratusan ketinggian unsur kanak-kanak diukur secara relatif kepada port pandangan jika elemen induk mempunyai ketinggian: auto. Dalam mod standard, ia dianggap sebagai ketinggian: auto.

TL;DR

Sentiasa sertakan DOCTYPE untuk memaparkan dokumen dalam mod standard. Gunakan DOCTYPE berikut:

<!DOCTYPE html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menetapkan Ketinggian Div kepada 100% Semasa Mengekalkan DOCTYPE?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Membuat Grid Petak Responsif dengan Kandungan Berpusat Menggunakan CSS? Artikel seterusnya：Bagaimanakah Saya Boleh Membuat Elemen Sebaris dalam HTML Mempunyai Lebar Tertentu?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2312

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2448

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2063

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...