[ เบราว์เซอร์ที่เข้าร่วมการทดสอบ : IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[ ระบบปฏิบัติการ : วินโดว์]
มาดูโค้ดกันก่อน:
เรียกใช้กล่องรหัส
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="หน้าแรก" />
<title>การใช้ขนาดกล่องเพื่อใช้เฟรมเลียนแบบ div</title>
<style type="text/css">
* { ระยะขอบ:0; การขยาย:0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; การขยายขนาดกล่อง:100px 0;
html ร่างกาย { ความสูง:100%;}
.top { ตำแหน่ง: ญาติ; ขอบด้านบน: -100px; ความสูง: 100px;
.side {position:relative; height:100%; พื้นหลัง:#fc0; overflow:auto;
.main { ตำแหน่ง: ญาติ; ล้น: อัตโนมัติ; ความสูง: 100%;
.bottom { ตำแหน่ง: ญาติ; ความสูง: 100px; พื้นหลัง: #f60; ชัดเจน:
</สไตล์>
</หัว>
<ร่างกาย>
<ระดับ div="บน">
สูงสุด
</div>
<ระดับ div="ด้าน">
ด้านข้าง
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<ระดับ div="main">
หลัก
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="ด้านล่าง">
ด้านล่าง
</div>
</ร่างกาย>
</html>
[Ctrl+A เลือกเคล็ดลับทั้งหมด: คุณสามารถแก้ไขบางส่วนของโค้ดก่อนแล้วจึงกด Run]
ส่วนสำคัญ :
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; การขยายขนาดกล่อง:100px 0;
หลักการน่าจะเป็นดังนี้ :
คำพูดนับพันคำไม่คุ้มค่ากับรูปภาพ เมื่อเปรียบเทียบก่อนและหลังการทำศัลยกรรม ทุกคนควรจะเห็นผลของ box-sizing:border-box
นักเรียนที่เข้าใจเรื่องขนาดกล่องควรรู้ว่ามันมาจากโลก CSS3 ซึ่งอยู่ห่างไกลจาก Weiguo ดังนั้นจึงไม่รองรับ IE6/IE7 แต่ฉันมีความรับผิดชอบอย่างยิ่งและพูดว่า: ปกติการสาธิตนี้เข้ากันได้กับ IE6/IE7
เนื่องจาก...
ภายใต้ IE6/IE7 ค่าขนาดกล่องเริ่มต้นของ <html> คือ border-box (หมายเหตุ: IE7 มีความผิดปกติเล็กน้อย และสติสัมปชัญญะได้ฟื้นตัวแล้วหลังจาก overflow:hidden ซึ่งจะไม่ส่งผลกระทบต่อการทำงานปกติของ การสาธิตนี้)
คำถามตอนนี้คือว่าจะใช้วิธีนี้หรือ
ไม่ ลองเปรียบเทียบข้อดีและข้อเสียแล้วคุณสามารถตัดสินใจได้ด้วยตัวเอง:
ควรใช้วิธีกำหนดตำแหน่งแบบสัมบูรณ์จะดี
ข้อเสียที่ใหญ่ที่สุดคือมันไม่ยืดหยุ่น หากไม่มี IE6 ฉันคิดว่าฉันจะเลือกวิธีกำหนดตำแหน่งแบบสัมบูรณ์อย่างแน่นอน
ต่อไปนี้เป็นตัวอย่างการสาธิตการใช้งาน
เรียกใช้กล่องรหัส
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="หน้าแรก" />
<title>การใช้ขนาดกล่องเพื่อใช้เฟรมเลียนแบบ div</title>
<style type="text/css">
* { ระยะขอบ:0; การขยาย:0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; ช่องว่างภายใน:100px 0;
html ร่างกาย { ความสูง:100%;}
.top { ตำแหน่ง: ญาติ; ขอบด้านบน: -100px; ความสูง: 100px;
.side {position:relative; height:100%; พื้นหลัง:#fc0; overflow:auto;
.main { ตำแหน่ง: สัมพันธ์กัน: ซ่อนอยู่; ความสูง: 100%; พื้นหลัง: #f30; ระยะขอบด้านบน: -100px; ดัชนี z:2;}
.main iframe { ความสูง:100%; ความกว้าง:100%; พื้นหลัง:#fff; ตำแหน่ง:สัมบูรณ์;
.bottom { ตำแหน่ง: ญาติ; ความสูง: 100px; พื้นหลัง: #f60; ชัดเจน:
</สไตล์>
</หัว>
<ร่างกาย>
<ระดับ div="บน">
สูงสุด
</div>
<ระดับ div="ด้าน">
ด้านข้าง
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<ระดับ div="main">
<iframe frameborder="0" src=" http://www.g.cn/"></iframe >
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="ด้านล่าง">
ด้านล่าง
</div>
</ร่างกาย>
</html>
[Ctrl+A เคล็ดลับการเลือกทั้งหมด: คุณสามารถแก้ไขโค้ดบางส่วนก่อน จากนั้นจึงกด Run]
ปัญหาที่ควรสังเกต :
อย่าให้โอเวอร์โฟลว์:ซ่อนอยู่ในเนื้อหา มันจะซ่อนสิ่งใดไว้ภายนอกอย่างไร้ความปราณี สิ่งต่างๆ รวมถึงด้านบน/ล่าง (ส่วนหัว/ส่วนท้าย)
จุดสำคัญประการหนึ่งที่ควรเข้าใจ :
วิธีการสร้างความสูง [100%+(N)px]: div { height:100%; padding-top:(N )px;} .