Reka letak kedudukan mutlak dengan ketinggian kontena 100%_CSS/HTML

Ketinggian bekas 100% adalah keperluan yang kerap digunakan, yang boleh dicapai oleh mana-mana bekas, dan tiada hubungan bersarang diperlukan.

Anggap badan sebagai bekas dan sebagai label atas objek dalaman Menetapkan ketinggiannya kepada 100% adalah penting.

Contoh paling asas

* { margin:0; padding:0; border:0;}
html,body { height:100%;} /* Tetapkan juga html untuk keserasian FF */
#box_2 { ketinggian:100%; latar belakang:#000;}

Kesan kedudukan bertindih

#kotak_1 { kedudukan: mutlak: 0; lebar: 100%; mutlak; kiri:0; atas: 0; tinggi: 100%;
Kesan ketinggian relatif menegak

#box_1 { kedudukan:absolute; atas:0; lebar:100%; kiri:0; atas:30%; lebar: 70%;
Kesan lebar relatif mendatar

#kotak_1 { kedudukan:absolute;0; lebar:100%; atas:0; kanan:0; lebar: 100%;
Susun atur ini tidak memerlukan terapung, dan terdapat banyak variasi:

1, susun atur lajur N
2, susun atur baris N

3, susun atur silang N-lajur tambah

Perlu diambil perhatian bahawa apabila menyemak imbas halaman bekas saiz relatif dalam FF, saiz bekas dilaraskan dalam masa nyata apabila saiz tetingkap dilaraskan, manakala IE hanya akan berkuat kuasa selepas tetingkap dilaraskan.

IE5.0/IE5.5/IE6.0 dan FF1.5 yang diuji lulus