แท็กและแอตทริบิวต์สำหรับส่วนท้ายใน html วิธีดันส่วนท้ายลอยไปที่ด้านล่างของหน้าอย่างถูกต้อง เริ่มจากทฤษฎีกันก่อน

นี่เป็นฝันร้ายบางอย่าง! เหตุใดส่วนท้ายของไซต์ของคุณจึงปรากฏขึ้นอีกครั้งและทำให้การออกแบบเปลี่ยนไป เป็นไปไม่ได้จริง ๆ ไหมที่จะกดส่วนท้ายของหน้าด้วยบางสิ่งอย่างถูกต้อง? อย่างน้อยเนื้อหาหรือก้อนอิฐ! อิฐในจอภาพไม่ปีน?

เห็นแล้วก็นั่งทำอะไรไม่ถูกจนกว่าจะอ่านบทความของเราจนจบ

สร้างส่วนท้ายที่เหมาะสมสำหรับไซต์ของคุณ

เจ้าของเว็บไซต์จำนวนมากประสบปัญหานี้เมื่อส่วนท้ายของหน้าปรากฏขึ้น " ขึ้น" แล้วไม่ชัดเจนว่าจะทำอย่างไร บ่อยครั้งที่การออกแบบเว็บไซต์ทำอย่างเร่งรีบด้วยตัวเอง (วงกลม "มือบ้า") หรือโดยผู้ดูแลเว็บมือใหม่ทำบาปด้วยข้อเสียเปรียบดังกล่าว

ในเวลาเดียวกันในช่วงเริ่มต้นของชีวิตของไซต์ไม่มีอะไรน่ากลัวเกิดขึ้น และไอดีลดังกล่าวจะคงอยู่ต่อไปตราบเท่าที่เนื้อหากด "ด้วยน้ำหนักของมันเอง" บนชั้นใต้ดิน ป้องกันไม่ให้มันลอยขึ้นมา แต่มันก็คุ้มค่าที่จะใส่เนื้อหาน้อยลงบนหน้าและส่วนท้ายที่ "สงบ" เมื่อเร็ว ๆ นี้ก็ปรากฏขึ้นทันทีทำให้การออกแบบทั้งหมดของเว็บไซต์ดูไม่เหมาะสม

เพื่อกำจัด "ข้อบกพร่อง" ของเทมเพลตที่สร้างขึ้นคุณไม่จำเป็นต้องใช้เงินกับบริการของผู้ดูแลเว็บ บ่อยครั้งที่ส่วนท้ายของไซต์สามารถวางไว้ได้เอง ลองพิจารณาตัวเลือกที่เป็นไปได้ทั้งหมดเพื่อขจัดปัญหาดังกล่าว:

วิธีแรก

วิธีแรกในการ "ยึด" ส่วนท้าย "ไปที่ด้านล่าง" ของหน้าจะขึ้นอยู่กับ CSS เรามาเริ่มกันที่โค้ดตัวอย่าง จากนั้นพิจารณาการใช้งานให้ละเอียดยิ่งขึ้น:

html ( ความสูง: 100%; ) ส่วนหัว, nav, ส่วน, บทความ, ด้านข้าง, ส่วนท้าย ( จอแสดงผล: บล็อก; ) เนื้อหา ( ความสูง: 100%; ) #wrapper ( ความกว้าง: 1000px; ขอบ: 0 อัตโนมัติ; ความสูงขั้นต่ำ: 100 %; height: auto !important; height: 100%; ) #header ( ความสูง: 150px; background-color: rgb(0,255,255); ) #content ( padding: 100px; height:400px; background-color: rgb(51,255,102) ; ) #footer ( ความกว้าง: 1000px; ขอบ: -100px อัตโนมัติ 0; ความสูง: 100px; ตำแหน่ง: สัมพันธ์; สีพื้นหลัง: rgb(51,51,204); )

เพื่อติดส่วนท้ายไว้ที่ด้านล่างของหน้า เราย้ายแท็กออกจากคอนเทนเนอร์ (wrapper layer) เรายืดทั้งหน้าและเนื้อหาของ "เนื้อหา" ไปที่ขอบของหน้าจอ ในการทำเช่นนี้ ในโค้ด CSS เราตั้งค่าความสูงของแท็กเป็น 100%:

html ( ความสูง: 100%; ) เนื้อความ ( ความสูง: 100%; )

ตั้งค่าความสูงขั้นต่ำของชั้นคอนเทนเนอร์เป็น 100% สำหรับกรณีที่ความกว้างของเนื้อหามากกว่าความสูงของคอนเทนเนอร์ ให้ตั้งค่าคุณสมบัติเป็น auto ด้วยเหตุนี้ กระดาษห่อจะปรับตามความกว้างของเนื้อหาที่วางอยู่บนหน้าโดยอัตโนมัติ:

#wrapper ( ความสูงขั้นต่ำ: 100% ความสูง: อัตโนมัติ !important ความสูง: 100%; )

บรรทัดโค้ด "height: 100%" ใช้สำหรับ IE เวอร์ชันเก่าที่ไม่ยอมรับคุณสมบัติ min-height

เพื่อแยกช่องว่างสำหรับส่วนท้ายในการออกแบบเพจ เราตั้งค่าช่องว่างภายในสำหรับแท็กเป็น 100 พิกเซล:

#เนื้อหา ( ช่องว่างภายใน: 100px; )

ณ จุดนี้ เรามีหน้าเว็บแบบเต็มหน้าจอพร้อมพิกเซลเพิ่มเติมอีก 100 พิกเซล ซึ่ง "ทำให้เป็นกลาง" โดยค่าการเติมส่วนท้ายที่เป็นลบ (ระยะขอบ: -100px ) เมื่ออยู่ในตำแหน่งที่สัมพันธ์กัน ( ตำแหน่ง: สัมพันธ์กัน ) ดังนั้นด้วยค่าช่องว่างภายในที่เป็นลบ เราจึง "เลื่อน" ส่วนท้ายไปยังพื้นที่ของคอนเทนเนอร์ซึ่งตั้งค่าไว้ที่ความสูง 100%

ในตัวอย่างนี้ มาร์กอัปของเอกสารบนเว็บถูกกำหนดโดยใช้แท็ก HTML 5 ที่ค่อนข้างใหม่ ซึ่งเบราว์เซอร์รุ่นเก่าอาจตีความผิดได้ ด้วยเหตุนี้ การออกแบบทั้งหมดของหน้าอาจแสดงไม่ถูกต้อง เพื่อหลีกเลี่ยงปัญหานี้ คุณต้องแทนที่แท็กใหม่จากคลังแสงเวอร์ชัน 5 ของภาษาไฮเปอร์เท็กซ์ด้วยแท็กปกติ:

ส่วนท้ายของเนื้อหาส่วนหัว

รุ่นปรับปรุง

วิธีที่กล่าวถึงข้างต้นเกี่ยวกับวิธีทำให้ส่วนท้ายที่ด้านล่างของหน้า "ไม่สั่นคลอน" ไม่เหมาะสำหรับทุกคน หากคุณกำลังจะแก้ไขและปรับปรุงการออกแบบไซต์ของคุณในอนาคตโดยใช้ป๊อปอัป จะเป็นการดีกว่าถ้าคุณละทิ้งการใช้งานก่อนหน้านี้

บ่อยที่สุดในการใช้งานหน้าต่างป๊อปอัปจะใช้คุณสมบัติ CSS z-index ค่าของมันกำหนดลำดับที่เลเยอร์ซ้อนทับกัน

ยิ่งค่า z-index ขององค์ประกอบสูงเท่าใด องค์ประกอบนั้นก็จะยิ่งอยู่ในสแต็ก "เลเยอร์" โดยรวมมากขึ้นเท่านั้น

แต่เนื่องจากเราใช้การเติมส่วนท้ายเชิงลบในตัวอย่างก่อนหน้านี้ ด้านล่างของป๊อปอัปจะซ้อนทับกับพื้นที่ส่วนท้ายด้านบน แม้ว่าจะมีค่า z-index ที่สูงกว่าก็ตาม เนื่องจากพาเรนต์ของป๊อปอัป (wrapper ) ยังมีค่าน้อยกว่าสำหรับคุณสมบัตินี้

นี่คือเวอร์ชันที่ดีกว่า:

CSS - โค้ดตัวอย่าง:

html, เนื้อหา ( ความสูง: 100%; ) .ส่วนหัว ( ความสูง: 120px; สีพื้นหลัง: rgb(0,255,102); ) .main ( ความสูงขั้นต่ำ: 100%; ตำแหน่ง: ญาติ; สีพื้นหลัง: rgb(100,255,255); ) .footer ( ความสูง: 150px; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านล่าง: 0; ความกว้าง: 100%; สีพื้นหลัง: rgb(0,0,153); )

ดังที่คุณเห็นจากโค้ด เราได้วางส่วนท้ายไว้เป็นส่วนหนึ่งขององค์ประกอบหลัก เราได้กำหนดตำแหน่งสัมพัทธ์ให้กับคอนเทนเนอร์และตำแหน่งสัมบูรณ์สำหรับส่วนท้าย เราแก้ไขส่วนท้ายที่ด้านล่างสุดของคอนเทนเนอร์โดยตั้งค่าตำแหน่งด้านซ้ายและบนสุดเป็น 0

ตัวแปรสำหรับชั้นใต้ดินที่มีความสูงไม่คงที่

การใช้งานก่อนหน้านี้สามารถรับประกันได้ว่าส่วนท้ายจะอยู่ที่ด้านล่างสุดของหน้าเสมอ แต่ถ้าส่วนท้ายมีความกว้างคงที่ แต่จะเป็นอย่างไรหากไม่สามารถคาดการณ์จำนวนเนื้อหาที่อยู่ในเนื้อหาได้

สิ่งนี้จะต้องใช้ตัวเลือกขั้นสูงสำหรับห้องใต้ดินที่ไม่คงที่ กำหนดส่วนท้ายเป็นแถวของตารางสำหรับคุณสมบัติการแสดงผล สิ่งนี้จะทำให้ปรากฏเป็นแถวของตาราง

สวัสดีผู้อ่านที่รักของเว็บไซต์บล็อก เราดำเนินการต่อในหัวข้อของรูปแบบบล็อก ซึ่งเริ่มต้นและดำเนินการต่อในสามบทความก่อนหน้านี้ โดยหลักการแล้ว เราสามารถสร้างเลย์เอาต์ไซต์แบบสองและสามคอลัมน์ได้แล้ว และเรายังจัดการเพื่อพิจารณาถึงความแตกต่างของการสร้างเลย์เอาต์แบบไหล

นอกจากนี้ในบทความแรกเกี่ยวกับการจัดวางไซต์ () มีการพิจารณาแนวคิดพื้นฐานบางประการของเว็บมาสเตอร์โดยไม่เข้าใจว่าเป็นการยากที่จะเข้าใจความแตกต่าง

คุณมีปัญหาอะไรกับการจัดวางไซต์ของเรา

วันนี้เราจะพยายามแก้ปัญหาเล็ก ๆ ที่อาจเกิดขึ้นกับเค้าโครงที่เราสร้างไว้ก่อนหน้านี้ บ่อยครั้งที่สถานการณ์นี้เกิดขึ้นเมื่อดูบนจอภาพขนาดใหญ่ (ที่มีความละเอียดสูง) และเมื่อแสดงหน้าที่มีข้อมูลจำนวนเล็กน้อย

ในกรณีนี้อาจกลายเป็นว่าส่วนท้ายจะไม่ถูกกดที่ด้านล่างของหน้าจอ แต่จะอยู่ที่ความสูงเกือบกึ่งกลางซึ่งในกรณีส่วนใหญ่จะดูน่าเกลียดและไม่สวยงาม

ในความคิดของฉัน คุณต้องกดส่วนท้ายลงไปที่ด้านล่างสุดของเลย์เอาต์ของไซต์ และนี่จะเป็นจริงโดยเฉพาะอย่างยิ่งในกรณีที่ความสูงของหน้าน้อยกว่าความสูงของหน้าจอของผู้ใช้ แผนผังนี้สามารถแสดงได้ดังนี้:

เหล่านั้น. ลักษณะการทำงานที่ถูกต้องของส่วนท้ายสำหรับกรณีข้อมูลจำนวนน้อยบนเพจและหน้าจอผู้ใช้ขนาดใหญ่จะเป็นดังนี้:

ในการดำเนินการนี้ เราจำเป็นต้องดำเนินการปรับแต่งโค้ดของเลย์เอาต์ของเราจำนวนหนึ่ง นอกจากนี้ เราจะทำการเปลี่ยนแปลงไม่เพียงแต่กับไฟล์สไตล์ CSS Style.css เท่านั้น แต่ยังรวมถึง Index.html ซึ่งมีโค้ด Html และบล็อก Div ของฟอร์มด้วย แต่สิ่งแรกก่อน

ตัวอย่างเช่น เราจะใช้เค้าโครงไซต์แบบสามคอลัมน์ที่เราสร้างขึ้นก่อนหน้านี้ ในกรณีนี้ Index.html จะมีลักษณะดังนี้:

ส่วนหัว ส่วนหัว เนื้อหาของหน้า เนื้อหาของหน้า เนื้อหาของหน้า เนื้อหาของหน้า ส่วนท้าย

และคุณสมบัติ CSS ต่อไปนี้เขียนในไฟล์ Style.css:

เนื้อหา html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer ( สีพื้นหลัง:#FFC0FF; ชัดเจน: ทั้งสอง; )

เลย์เอาต์นั้นมีลักษณะดังนี้:

อย่างที่คุณเห็น ส่วนท้ายไม่ได้กดลงไปที่ด้านล่าง ดังนั้นจึงไม่เป็นไปตามข้อกำหนดของเรา (จะอยู่ใต้คอลัมน์ล่างสุดเสมอ) ดังนั้นเราจะต้องปรับเปลี่ยนโค้ด สามารถทำได้เช่นเดียวกันสำหรับเค้าโครงสองคอลัมน์ และสำหรับเค้าโครงแบบไหลด้วย วิธีการนี้เป็นสากล

วิธีดันส่วนท้ายไปที่ด้านล่างของเค้าโครงไซต์

ดังนั้นเราต้องย้าย Div ส่วนท้ายไปที่ด้านล่างของหน้าจอ ในการทำเช่นนี้ ก่อนอื่นคุณต้องตั้งค่าความสูงของทั้งหน้าเป็นหนึ่งร้อยเปอร์เซ็นต์ (จะใช้พื้นที่ทั้งหน้าจอ) สิ่งนี้จำเป็นเพื่อปรับขนาดบล็อกหลักด้วยเลย์เอาต์สูงสุด 100%

เนื้อหาทั้งหมดของหน้าไซต์จะอยู่ในแท็กเปิดและปิดของ Body ดังนั้นเราจำเป็นต้องเพิ่มคุณสมบัติ CSS อีกหนึ่งรายการสำหรับแท็ก Body ใน Style.css ซึ่งกำหนดความสูงเป็น 100%:

เนื้อหา, html ( margin:0px; padding:0px; ความสูง: 100%; )

สิ่งนี้จะไม่ส่งผลกระทบต่อรูปลักษณ์ แต่อย่างใด แต่ตอนนี้บล็อกหลักสามารถขยายได้เต็มความสูงของหน้าจอ เหล่านั้น. มันเป็นขั้นตอนการเตรียมการ

คุณสมบัติ CSS พื้นฐาน หากคุณต้องการ คุณสามารถดูที่ . ตอนนี้มาตั้งค่าคอนเทนเนอร์ Div ที่ปิดโครงร่างทั้งหมดของเราให้มีความสูงขั้นต่ำ 100%:

ฉันต้องการเน้นด้วย (div with id="maket") ในการทำเช่นนี้เราจะตั้งค่าเฟรมโดยใช้คุณสมบัติ Border () ที่สอดคล้องกัน:

เส้นขอบคุณสมบัติ: สีดำทึบ 3px ให้คุณตั้งค่าเส้นขอบทึบ (ทึบ) ที่มีความหนา 3 พิกเซลเป็นสีดำสำหรับคอนเทนเนอร์นี้ วิธีนี้จะช่วยให้คุณเห็นได้อย่างชัดเจนว่าคอนเทนเนอร์ที่มีเลย์เอาต์นั้นขยายเต็มความสูงของหน้าจอ แม้จะมีข้อมูลจำนวนเล็กน้อยในหน้าก็ตาม:

ตอนนี้เราจะต้องนำบล็อกส่วนท้ายออกจากคอนเทนเนอร์ทั่วไปแล้ววางไว้ด้านล่าง ต่อจากบล็อกทั่วไปทันที จะให้อะไร? และข้อเท็จจริงที่ว่า ในที่สุด ส่วนท้ายในเลย์เอาต์จะเลื่อนลงมา และจะไม่ชิดกับคอลัมน์ที่ยาวที่สุดเหมือนแต่ก่อน ในกรณีนี้ Index.html จะมีลักษณะดังนี้:

ส่วนหัว ส่วนหัว คอลัมน์ด้านซ้าย เมนู เมนู เมนู เมนู คอลัมน์ด้านขวา เมนู เมนู เมนู เมนู เนื้อหาหน้า เนื้อหาหน้า เนื้อหาหน้า เนื้อหาส่วนท้าย

โปรดทราบว่าบล็อกส่วนท้ายไม่ได้อยู่ในคอนเทนเนอร์ทั่วไป (maket) อีกต่อไป ดังนั้นความกว้างจึงไม่ถูกควบคุมโดยคุณสมบัติ CSS ที่ตั้งค่าไว้สำหรับ maket ในไฟล์ Style.css อีกต่อไป ส่วนท้ายจะถูกยืดออกไปตามความกว้างของหน้าจอ แต่จะยังคงอยู่ที่ด้านล่างของหน้าจอ ใต้บล็อกหลักทันที:

แต่มีปัญหาอีกครั้งเพราะเพื่อที่จะเห็นส่วนท้ายตอนนี้คุณต้องเลื่อนหน้าจอในเบราว์เซอร์ (ดูแถบเลื่อนในรูปด้านบน)

ปรากฎว่าเป็นเพราะคอนเทนเนอร์หลัก (maket) ใช้ความสูงของขนาดหน้าจอทั้งหมด (กำหนดโดยคุณสมบัติ min-height: 100%) และส่วนท้ายจะอยู่ด้านหลังทันที และคุณจะต้องใช้ เลื่อนไปดูซึ่งไม่ค่อยสะดวกและใช้งานได้จริง .

คุณสามารถแก้ปัญหานี้ได้โดยการใส่ค่าลบให้กับส่วนท้ายของคอนเทนเนอร์ Div เพื่อให้มันเลื่อนขึ้นไปเป็นระยะทางเท่ากับความสูง ในกรณีนี้ คอนเทนเนอร์ส่วนท้ายจะอยู่เหนือคอนเทนเนอร์หลักและพอดีกับความสูงของหน้าจอเบราว์เซอร์ (นั่นคือ คุณไม่จำเป็นต้องใช้การเลื่อนเพื่อดู)

แต่เพื่อตั้งค่าการเยื้องจากด้านบนคุณต้องทราบความสูงของส่วนท้ายเดียวกันนี้ แต่เรายังไม่ทราบ

ดังนั้น อันดับแรก เราตั้งค่าความสูงของคอนเทนเนอร์ที่มีส่วนท้ายด้วยการตั้งค่าคุณสมบัติที่เกี่ยวข้องใน Style.css:

#footer( สีพื้นหลัง:#FFC0FF; ชัดเจน: ทั้งสอง; ความสูง: 50px; )

จากนั้นเราตั้งค่าช่องว่างภายในเชิงลบจากด้านบนเป็นความสูงเท่ากับความสูง:

สิ่งนี้จะช่วยให้ส่วนท้ายสูงขึ้นจนพอดีกับหน้าจอเบราว์เซอร์ (ตอนนี้เราสามารถลบเส้นขอบ: คุณสมบัติ CSS สีดำทึบ 3px ออกจากกฎ maket เพื่อให้ความหนาของเส้นขอบไม่ขัดขวางเค้าโครงทั้งหมดของเรา , พร้อมด้วยส่วนท้าย, จากความสูงพอดีกับหน้าจอ) :

อย่างที่คุณเห็น ตอนนี้แถบเลื่อนในเบราว์เซอร์ไม่ปรากฏขึ้นและเค้าโครงไซต์แบบบล็อกสามคอลัมน์ทั้งหมดของเราพอดีกับหน้าจอเดียว (ในกรณีที่มีข้อมูลจำนวนเล็กน้อยในหน้า) และมีส่วนท้ายอยู่ที่ส่วนท้ายสุด ด้านล่าง. ซึ่งเป็นสิ่งที่เราต้องทำ

เราใส่ตัวเว้นวรรคและต่อสู้กับ Internet Explorer

แต่ปัญหาจะเกิดขึ้นก็ต่อเมื่อมีข้อมูลเพิ่มเติมในหน้าเลย์เอาต์เท่านั้น และสถานการณ์นี้อาจกลายเป็น:

ปรากฎว่าสถานการณ์อาจเกิดขึ้นเมื่อข้อมูลในคอลัมน์ใดคอลัมน์หนึ่งของเลย์เอาต์จะทำงานในส่วนท้ายซึ่งจะดูไม่ดี นี่เป็นเพราะช่องว่างภายในเชิงลบที่เรากำหนดไว้ซึ่งช่วยยกระดับส่วนท้ายของเราในคอนเทนเนอร์เค้าโครงหลัก

เหล่านั้น. ปรากฎว่าที่ด้านล่างของหน้าจอมีบล็อกสองบล็อกซ้อนทับกันในพื้นที่ชั้นใต้ดิน

วิธีแก้ไขปัญหานี้คือการเพิ่มคอนเทนเนอร์ Div เปล่าใหม่ (เรียกว่าตัวเว้นวรรค) ลงในคอนเทนเนอร์หลักของเลย์เอาต์ของเรา (เลย์เอาต์) ในตำแหน่งที่บล็อกส่วนท้ายเคยอยู่

การตั้งค่าความสูงของคอนเทนเนอร์ใหม่นี้เป็นความสูงของส่วนท้าย เราสามารถหลีกเลี่ยงไม่ให้ข้อมูลจากคอนเทนเนอร์หลักชนกับบล็อกส่วนท้าย ให้รหัสคอนเทนเนอร์นี้ () เรียกว่า Rasporka และผลลัพธ์ที่ได้คือ Index.html ของเค้าโครงสามคอลัมน์ของเราจะมีลักษณะดังนี้:

ส่วนหัว ส่วนหัว คอลัมน์ซ้าย เมนูเมนู เมนู เมนูคอลัมน์ขวา เมนูเมนู เมนู หน้าเนื้อหา หน้าเนื้อหา หน้าเนื้อหา หน้าหน้า หน้า หน้า หน้าท้ายหน้า

และใน Style.css เราเขียนสิ่งนี้ ( ซึ่งกำหนดความสูงของคอนเทนเนอร์สเปเซอร์เท่ากับความสูงของชั้นใต้ดิน:

#rasporka ( ความสูง: 50px; )

เป็นผลให้ส่วนท้ายจะถูกกดจากด้านล่างไม่ใช่ข้อมูลที่อยู่ในคอนเทนเนอร์หลัก (เช่น ข้อความในคอลัมน์สูงสุด) แต่กดพื้นที่ที่มีความสูงเท่ากับส่วนท้ายด้วยคอนเทนเนอร์สเปเซอร์ มีข้อมูลใดๆ

ด้วยวิธีนี้ เราหลีกเลี่ยงการชนกันและการบิดเบี้ยวในเค้าโครงสามคอลัมน์ของเรา ทุกอย่างจะชัดเจนและสวยงาม (เหมาะสมและสูงส่ง):

ดังที่ฉันได้กล่าวไว้ข้างต้น ตอนนี้ควรตั้งค่าความกว้างของส่วนท้ายแยกต่างหากเนื่องจาก คอนเทนเนอร์นี้ไม่ได้เป็นส่วนหนึ่งของคอนเทนเนอร์หลักอีกต่อไป ในการดำเนินการนี้ คุณต้องเพิ่มคุณสมบัติเพิ่มเติมสำหรับส่วนท้ายลงในไฟล์ CSS ทำให้คุณสามารถตั้งค่าความกว้างและจัดตำแหน่งแนวนอนตรงกลางหน้าจอได้

การตั้งค่าความกว้างให้เท่ากับความกว้างของโครงร่างทั้งหมดนั้นเหมาะสมแล้วโดยใช้คุณสมบัติความกว้าง และการจัดแนวแนวนอนสามารถทำได้ในลักษณะเดียวกับที่เราทำกับโครงร่างทั้งหมดบนโครงร่างแบบบล็อก

ดังนั้น เราจะต้องเพิ่มคุณสมบัติเพิ่มเติมสำหรับรหัสส่วนท้าย:

#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )

เมื่อใช้คุณสมบัติ width:800px ความกว้างจะถูกตั้งค่าเป็น 800 พิกเซล และใช้คุณสมบัติสองอย่าง ระยะขอบซ้าย: อัตโนมัติ และระยะขอบขวา: อัตโนมัติ การตั้งค่าระยะขอบซ้ายทางด้านซ้ายและขวาของส่วนท้ายจะถูกตั้งค่าโดยอัตโนมัติ เช่น ผลที่ตามมาคือระยะขอบเหล่านี้จะเท่ากันและฮีโร่ของเราจะอยู่ตรงกลาง:

ดูเหมือนว่าจะไม่มีอะไรต้องปรับปรุงเพิ่มเติม แต่ก็เป็นเช่นนั้น เช่นเคย Internet Explorer 6 เบราว์เซอร์โปรดของเราไม่เข้าใจบางสิ่งจากคุณสมบัติของ CSS ที่เราใช้งาน ในเบราว์เซอร์นี้ (และอาจเป็นในเบราว์เซอร์เก่าอื่นๆ ด้วย) แม้ว่าเราจะพยายามอย่างเต็มที่แล้วก็ตาม ส่วนท้ายจะไม่ถูกกดลงไปที่ด้านล่าง แต่จะยังคงอยู่ที่คอลัมน์สูงสุดของเลย์เอาต์ของไซต์

ทั้งหมดนี้เป็นเพราะ ( ไม่เข้าใจคุณสมบัติ min-height: 100% ที่เราใช้เพื่อตั้งค่าความสูงขั้นต่ำของกล่องหลักให้เท่ากับความสูงของหน้าจอ

ดังนั้นเพื่อแก้ปัญหานี้เราจะต้องใช้แฮ็คที่เรียกว่าซึ่งช่วยให้เราสามารถอธิบาย (บนนิ้ว) กับเบราว์เซอร์เก่าว่าต้องทำอย่างไร ก่อนรายการคุณสมบัติ CSS สำหรับ maket คุณจะต้องแทรกชุดค่าผสมต่อไปนี้:

* html #make ( ความสูง: 100%; )

กฎนี้จะใช้กับเบราว์เซอร์ Internet Explorer 6 เท่านั้น ส่วนที่เหลือจะไม่นำมาพิจารณาและปฏิบัติตาม

ดังนั้น รูปลักษณ์สุดท้ายของ Style.css โดยกดส่วนท้ายที่ด้านล่างของหน้าจอจะเป็นดังนี้:

เนื้อหา html ( margin:0px; padding:0px; height: 100%; ) * html #maket ( height: 100%; ) #maket ( width:800px; margin:0 auto; min-height: 100%; ) # ส่วนหัว( สีพื้นหลัง:#C0C000; ) #left( สีพื้นหลัง:#00C0C0; width:200px; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content ( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer( background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; ขอบซ้าย: อัตโนมัติ; ขอบขวา: อัตโนมัติ; ) #rasporka ( ความสูง: 50px; )

รูปแบบสุดท้ายของ Index.html ถูกกำหนดให้สูงขึ้นเล็กน้อย นั่นคือทั้งหมดในบทความชุดนี้ที่อุทิศให้กับเค้าโครงบล็อกของคอลัมน์คงที่ 2 และ 3 และเค้าโครงยางของไซต์ถือว่าเสร็จสมบูรณ์

คุณยังสามารถดูวิดีโอ "การทำงานกับแท็ก div Html":

ขอให้โชคดี! พบกันเร็ว ๆ นี้ในเว็บไซต์บล็อกหน้า

คุณอาจจะสนใจ

เลย์เอาต์แบบบล็อก - เราสร้างเลย์เอาต์แบบสองคอลัมน์ สามคอลัมน์ และแบบไหลสำหรับไซต์
เค้าโครง DiV - สร้างบล็อกสำหรับเค้าโครงสองคอลัมน์ใน HTML กำหนดขนาดและกำหนดตำแหน่งใน CSS

บ่อยครั้งเมื่อติดตั้งปุ่ม แบนเนอร์ ฯลฯ มีความจำเป็นต้องแทรกโค้ด html, css และ JavaScript ลงในเนื้อหาของแท็ก body และ head การดำเนินการด้วยตนเองที่ไม่ถูกต้องของการดำเนินการนี้อาจทำให้ไซต์เสียหายและอาจขัดขวางประสิทธิภาพการทำงานโดยสิ้นเชิง

เพื่อให้กระบวนการนี้เป็นไปโดยอัตโนมัติ ปลั๊กอินที่ยอดเยี่ยมได้ถูกสร้างขึ้น ไปที่การตั้งค่าในแผงการดูแลระบบและทำงานด้วยความยินดี ใช้งานง่ายและมีคุณสมบัติดังต่อไปนี้:

หากต้องการขยายภาพให้คลิกด้วยปุ่มเมาส์ คลิกอีกครั้งเพื่อซูมออก

1. Page Head and Footer (ส่วนหัวและส่วนท้ายของหน้า) การเพิ่มรหัสไปยังหน้าหลักของเว็บไซต์

รหัสที่จะเพิ่มในส่วน HEAD ของบ้าน (รหัสที่จะใส่ในส่วนหัวของหน้าแรก (หลัก)) ให้คุณแทรกเมตาแท็ก รหัสสำหรับป้ายโฆษณา ปุ่ม ฯลฯ ในเนื้อหาของแท็ก บ่อยครั้งที่มันเป็นส่วนที่มองไม่เห็นของรหัสเนื่องจากไม่มีการแสดงภาพบนเว็บไซต์ ผลลัพธ์ของการทำงานของส่วนที่มองเห็นของรหัสจะปรากฏเหนือส่วนหัวในหน้าหลัก

รหัสที่จะเพิ่มในส่วน HEAD ของทุกหน้า (รหัสที่จะใส่ในส่วนหัวของแต่ละหน้า) การเพิ่มโค้ดให้กับเนื้อหาแท็กในส่วน HEAD ผลลัพธ์ของส่วนที่มองเห็นได้ของโค้ดจะปรากฏเหนือส่วนหัวของทุกหน้า รวมถึงส่วนหลักด้วย

รหัสที่จะเพิ่มก่อนส่วนท้ายของหน้า (รหัสที่จะใส่ที่ส่วนท้าย (ส่วนท้าย) ของหน้า) การเพิ่มโค้ดที่ส่วนท้ายของทุกหน้าก่อนแท็กปิด ใช้งานได้เฉพาะกับธีมที่มีส่วนท้ายและไฟล์ footer.php

ตัวนับเกือบทั้งหมดประกอบด้วยสองส่วน - นี่คือรหัสของส่วนที่มองไม่เห็นและมองเห็นได้ (ตัวแจ้ง) ของตัวนับ รหัสชิ้นส่วนที่มองไม่เห็นจะถูกแทรกไว้หลังแท็กเปิด โดยให้อยู่สูงที่สุดเท่าที่จะเป็นไปได้ที่ด้านบนของหน้า ในการทำเช่นนี้ คุณสามารถใช้ปลั๊กอินหรือทำการแก้ไขโดยตรงในไฟล์ header.php, รหัสของส่วนที่มองเห็นได้ (informer) ถูกแทรกลงในส่วนท้ายของไซต์โดยใช้ปลั๊กอินส่วนหัวและส่วนท้ายก่อนแท็กปิดหรือในแถบด้านข้างโดยใช้วิดเจ็ต

2. โพสต์เนื้อหา (โพสต์เนื้อหา) การเพิ่มโค้ดที่จุดเริ่มต้นและจุดสิ้นสุดของโพสต์ในหน้าหมวดหมู่ทั้งหมด เมื่อโพสต์แสดงแบบเต็ม

รหัสที่ต้องใส่ก่อนการโพสต์แต่ละครั้ง (รหัสที่จะใส่ก่อนการโพสต์แต่ละครั้ง) ใส่รหัสที่จุดเริ่มต้นของโพสต์แต่ละหมวดหมู่ (บทความ) หลังชื่อเรื่อง เฉพาะเมื่อบทความแสดงแบบเต็มเท่านั้น

รหัสที่จะใส่หลังจากแต่ละโพสต์ (รหัสที่จะใส่หลังจากแต่ละโพสต์) ใส่รหัสหลังโพสต์แต่ละหมวดหมู่

3. เนื้อหาของหน้า การเพิ่มโค้ดที่จุดเริ่มต้นและจุดสิ้นสุดของโพสต์ของหน้าสแตติกทั้งหมด เมื่อโพสต์แสดงแบบเต็ม

รหัสที่จะใส่ก่อนแต่ละหน้า ใส่รหัสที่จุดเริ่มต้นของแต่ละโพสต์ (บทความ) ของหน้าคงที่หลังชื่อ เฉพาะเมื่อบทความแสดงแบบเต็ม

รหัสที่จะใส่หลังแต่ละหน้า รหัสจะถูกแทรกหลังโพสต์ในทุกหน้าคงที่

4. เฟสบุ๊ค หากคุณเพิ่ม og:image metafeature (โปรโตคอล Open Graph ที่สามารถใช้เพื่อป้อนข้อมูลเมตาในรูปแบบ Social Graph บนหน้าทรัพยากร) ตัวอย่างเช่น รายชื่อผู้ติดต่อ Faceboock เมื่อคุณคลิกปุ่ม Faceboock ที่จุดเริ่มต้นหรือจุดสิ้นสุด ของโพสต์ คุณสามารถควบคุมการเลือกรูปภาพในทุกหน้าซึ่งจะไปที่วอลล์ของผู้ใช้

5. ตัวอย่าง เป็นไปได้ที่จะตั้งค่าข้อความที่ตัดตอนมาที่วอลล์ของผู้ใช้เมื่อคลิกปุ่มโซเชียลเน็ตเวิร์กซึ่งอยู่ที่จุดเริ่มต้นหรือจุดสิ้นสุดของโพสต์ ข้อความที่ตัดตอนมาจะถูกส่งเป็น โดยที่ N คือจำนวนของข้อความที่ตัดตอนมาจาก 1 ถึง 5

6. หมายเหตุและรหัสจอด หมายเหตุ

ใน HTML5 มีการแนะนำแท็กใหม่หลายแท็กสำหรับโครงสร้างโค้ด: , , , , ซึ่งในบางกรณีแทนที่แท็กปกติ . แม้ว่าจะดูเหมือนว่าไม่มีความแตกต่างระหว่างแท็กมากนัก แต่ก็มีช่องว่างขนาดใหญ่ระหว่างแท็กทั้งสอง แท็กไม่ได้มุ่งเป้าไปที่ผู้ที่ไม่มีเหตุผลที่จะดูซอร์สโค้ดของหน้า แต่ไปที่เครื่องที่ตีความโค้ด เครื่องจักรหรือหุ่นยนต์ไม่เข้าใจ สำหรับพวกเขานี่คือแท็กมาร์กอัปทั่วไป - แทนที่ด้วยและความหมายจะไม่เปลี่ยนแปลง อีกสิ่งหนึ่งคือโรบ็อตพบแท็กนี้แล้วรับรู้ว่าเป็นส่วนหัวของไซต์หรือส่วน

มันให้อะไรในที่สุด? เสิร์ชเอ็นจิ้นเริ่มจัดทำดัชนีไซต์ได้ดีขึ้น เนื่องจากจะแยกเนื้อหาของหน้าออกจากองค์ประกอบเสริมอย่างชัดเจน เบราว์เซอร์คำพูดที่ออกแบบมาสำหรับคนตาบอดจะข้ามชื่อเรื่องและไปที่เนื้อหาโดยตรง ไซต์สามารถแบ่งปันเนื้อหาและข้อมูลอื่น ๆ โดยอัตโนมัติ คุณลักษณะทั้งหมดนี้เรียกว่าความหมายและช่วยให้คุณสามารถนำเสนอข้อมูลในรูปแบบที่สะดวกสำหรับโรบ็อต

ก่อนอื่นมาสร้างส่วนหัวของไซต์โดยใช้แท็ก (ตัวอย่าง 6.2)

ตัวอย่าง 6.2 การใช้งาน

ความพยายามในการเพิ่มพื้นหลังให้กับแท็กในรูปแบบไม่ได้นำไปสู่สิ่งใด พื้นหลังไม่ต้องการให้แสดงในเบราว์เซอร์บางตัว แท็กใหม่ทั้งหมดควรทำแบบบล็อกผ่านคุณสมบัติการแสดงผลก่อน จากนั้นจึงจะเริ่มแสดงอย่างถูกต้อง (ตัวอย่าง 6.3)

ตัวอย่าง 6.3 ส่วนหัวของไซต์

HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx

ส่วนหัว ( แสดง: บล็อก; พื้นหลัง: #00B0D8 url(images/header-gradient.png) repeat-x; )

ตัวอย่างนี้จะใช้ได้กับทุกเบราว์เซอร์ ยกเว้น IE7 และ IE8 Internet Explorer ไม่ใส่สไตล์ให้กับองค์ประกอบที่ไม่เข้าใจ ความเข้าใจผิดนี้สามารถแก้ไขได้โดยการสร้างองค์ประกอบจำลองโดยใช้ JavaScript ในการดำเนินการนี้ ให้รวมรหัสดังกล่าวไว้ด้วย

document.createElement("ส่วนหัว");

หากมีหนึ่งแท็กในหน้าสคริปต์นี้ค่อนข้างเหมาะสำหรับการทำงาน แต่ฉันไม่ต้องการทำซ้ำบรรทัดสิบครั้งสำหรับสิบแท็กที่แตกต่างกัน ดังนั้นเราจึงทำให้กระบวนการนี้เป็นไปโดยอัตโนมัติผ่านการวนซ้ำ ตัวแท็กถูกระบุเป็นรายการ คั่นด้วยเครื่องหมายจุลภาค (ตัวอย่าง 6.4)

ตัวอย่าง 6.4 สคริปต์สำหรับ IE

var e = ("บทความ,นอกเหนือ,figcaption,รูป,ส่วนท้าย,ส่วนหัว,hgroup,nav,section,time").split(","); สำหรับ (var i = 0; i< e.length; i++) { document.createElement(e[i]); }

สคริปต์นั้นถูกห่อด้วยความคิดเห็นแบบมีเงื่อนไขเพื่อให้ทำงานบน IE เวอร์ชัน 8.0 และต่ำกว่าเท่านั้น IE9 รองรับแท็ก HTML5 ใหม่แล้ว

คุณไม่จำเป็นต้องแทรกตัวอย่างข้างต้นลงในไซต์ของคุณ คุณสามารถใช้สคริปต์สาธารณะที่เขียนโดย Remy Sharp และเผยแพร่ภายใต้ใบอนุญาต MIT ในการทำเช่นนี้ เพียงชี้ไปที่ลิงค์ ดังตัวอย่างที่ 6.5

ตัวอย่าง 6.5 สคริปต์สำหรับ IE

สคริปต์ที่ระบุทั้งหมดต้องอยู่ในโค้ดก่อน CSS

ดังนั้น สำหรับการใช้งานแท็ก HTML5 อย่างเต็มรูปแบบในทุกเบราว์เซอร์ เงื่อนไขสามประการก็เพียงพอแล้ว:

ติดตั้ง doctype ;

รวมสคริปต์จากตัวอย่าง 6.4 หรือ 6.5;

ตั้งค่าการแสดงผล : บล็อกในรูปแบบสำหรับแท็กใหม่

ตอนนี้เรามาดูรายละเอียดเพิ่มเติมของแท็ก HTML5 เพื่อทำความเข้าใจขอบเขตแท็ก

ตัวอย่าง 6.6 การใช้แท็ก

HTML5 IE Cr Op Sa Fx

บทความ รอยเท้าสัตว์เร้นลับ เรื่องราวของรอยเท้าสีชมพูลึกลับที่มีนิ้วหกนิ้วปรากฏขึ้นใกล้ห้องอาหารได้อย่างไร และทำไมจึงเกิดขึ้น

กำหนดบล็อกซึ่งไม่เกี่ยวข้องกับเนื้อหาหลัก สำหรับวางหมวดหมู่ ลิงก์ไปยังไฟล์เก็บถาวร แท็ก และข้อมูลอื่นๆ (ตัวอย่าง 6.7) บล็อกดังกล่าว หากอยู่ด้านข้าง มักเรียกว่า "แถบด้านข้าง" หรือ "แถบด้านข้าง"

ตัวอย่าง 6.7 การใช้งาน

HTML5 IE Cr Op Sa Fx

กัน document.createElement("กัน"); document.createElement("บทความ"); กัน ( พื้นหลัง: #f0f0f0; /* สีพื้นหลัง */ ช่องว่างภายใน: 10px; /* ระยะขอบ */ ความกว้าง: 200px; /* ความกว้างของแถบด้านข้าง */ ลอย: ขวา; /* ตัดซ้าย */ ) บทความ ( ระยะขอบขวา: 240px ; /* ช่องว่างภายในขวา */ display: block; /* องค์ประกอบบล็อก */ )

ประหยัดไฟฟ้า

ภาษาที่ดี

แท่งของใครใหญ่กว่ากัน

เรื่องราวเกี่ยวกับวิธีประหยัดไฟฟ้า มาตรการที่ใช้สำหรับสิ่งนี้ และที่ไปจริง

ใช้เพื่อจัดกลุ่มองค์ประกอบใดๆ เช่น รูปภาพและคำบรรยาย (ตัวอย่าง 6.8)

ตัวอย่าง 6.8 การใช้งาน

HTML5 IE Cr Op Sa Fx

รูป document.createElement("รูป"); document.createElement("figcaption"); รูป ( พื้นหลัง: #5f6a72; /* สีพื้นหลัง */ ช่องว่างภายใน: 10px; /* ช่องว่างภายใน */ จอแสดงผล: บล็อก; /* องค์ประกอบบล็อก */ ความกว้าง: 150px; /* ความกว้าง */ ลอย: ซ้าย; /* บล็อกบรรทัด ขึ้นในแนวนอน */ margin: 0 10px 10px 0; /* margins */ text-align: center; /* center alignment */ ) figcaption ( color: #fff; /* text color */ )

มหาวิหารเซนต์โซเฟีย

โบสถ์โปแลนด์

มีคำอธิบายสำหรับแท็ก แท็กต้องเป็นองค์ประกอบแรกหรือองค์ประกอบสุดท้ายในกลุ่ม

ตั้งค่า "ส่วนท้าย" ของไซต์หรือส่วน โดยปกติจะมีชื่อผู้เขียน วันที่ของเอกสาร การติดต่อ และข้อมูลทางกฎหมาย (ตัวอย่าง 6.9)

ตัวอย่าง 6.9 การใช้งาน

HTML5 IE Cr Op Sa Fx

ส่วนท้าย เว็บไซต์ส่วนตัวของ Christina Vetrova ยินดีต้อนรับ!

ฉันดีใจที่ได้ต้อนรับคุณสู่ไซต์ของฉัน

ลิขสิทธิ์ Christina Vetrova

กำหนด "ส่วนหัว" ของไซต์หรือส่วน

ใช้เพื่อจัดกลุ่มส่วนหัวของเว็บเพจหรือส่วนต่างๆ (ตัวอย่าง 6.10)

ตัวอย่าง 6.10 การใช้งาน

HTML5 IE Cr Op Sa Fx

hgroup Kristina Vetrova เว็บไซต์ส่วนตัว

ตั้งค่าการนำทางไซต์ (ตัวอย่าง 6.11) หากมีบล็อกลิงก์หลายบล็อกในหน้านั้น โดยปกติแล้วลิงก์ลำดับความสำคัญจะถูกวางไว้ในบล็อกเหล่านั้น การใช้หลายแท็กในเอกสารหนึ่งฉบับก็เป็นที่ยอมรับได้เช่นกัน ห้ามมิให้ลงทุนภายใน

ตัวอย่าง 6.11 การใช้งาน

HTML5 IE Cr Op Sa Fx

นำทาง Cheburashka และจระเข้ Gena Cheburashka | จีน่า | ชาโปกลียัก | ลาริสกา ยินดีต้อนรับ!

กำหนดส่วนของเอกสาร ซึ่งอาจรวมถึงส่วนหัว ส่วนหัว ส่วนท้าย และข้อความ (ตัวอย่างที่ 6-12) คุณสามารถซ้อนแท็กหนึ่งแท็กไว้ในอีกแท็กหนึ่งได้

ตัวอย่าง 6.12. การใช้งาน

HTML5 IE Cr Op Sa Fx

ส่วนการยิงโพรพิลีน

เรื่องราวเกี่ยวกับวิธีการถ่ายทำของภาพยนตร์เรื่องนี้ โดยที่ตัวละครกำลังพักผ่อนบนชายหาด จากนั้นตัวร้ายก็มา ทุบตีตัวเอก โยนลงสระ และสิ่งที่เกิดขึ้น

ภาษาที่ดี

เรื่องราวของการจัดสตูดิโอสำหรับเรียนภาษาเอสเปรันโต ขณะที่ด้านบนระเบียงมีสตูดิโอสอนเล่นพิเรนทร์ มุกตลกถูกวางยาพิษ และที่มาของมัน

ทำเครื่องหมายข้อความภายในแท็กเป็นวันที่ เวลา หรือทั้งวันที่และเวลา สามารถระบุได้โดยตรงภายในคอนเทนเนอร์ หรือตั้งค่าผ่านแอตทริบิวต์ datetime (ตัวอย่าง 6.13)

วันที่และเวลาถูกกำหนดในรูปแบบสากล ISO 8601 ตัวอย่างการลงทะเบียนแสดงไว้ในตาราง 6.1.

แต่ละยูนิตมีรูปแบบและข้อจำกัดของตัวเอง

• ปี - กำหนดด้วยตัวเลขสี่หลัก (1860)
• เดือน - สองหลัก (01 - มกราคม, 02 - กุมภาพันธ์, 12 - ธันวาคม)
• วันเป็นตัวเลขสองหลักตั้งแต่ 01 ถึง 31
• ชั่วโมงเป็นตัวเลขสองหลักตั้งแต่ 00 ถึง 23
• นาทีเป็นตัวเลขสองหลักตั้งแต่ 00 ถึง 59
• วินาทีเป็นตัวเลขสองหลักตั้งแต่ 00 ถึง 59
• เขตเวลาเป็นชั่วโมงและนาทีโดยมีเครื่องหมายบวกหรือลบ

วันที่และเวลาจะคั่นด้วยอักษรละตินตัวพิมพ์ใหญ่ T หากจำเป็น เขตเวลาจะเขียนหลังเวลาด้วยเครื่องหมายบวกหรือลบ ตัวอย่างเช่น สำหรับมอสโก เขตเวลาจะเป็น +03:00

ตัวอย่าง 6.13. การใช้งาน

HTML5 IE Cr Op Sa Fx

เวลา

1957-10-04 ดาวเทียมโลกประดิษฐ์ดวงแรกเปิดตัว

1960-08-19 การบินครั้งแรกของสุนัขสู่อวกาศ

1961-04-12 นักบินขึ้นสู่อวกาศครั้งแรก

1963-06-16 เที่ยวบินแรกของนักบินอวกาศหญิง

1969-07-21 การลงจอดของชายคนหนึ่งบนดวงจันทร์

ฉันจำได้ว่าในขณะที่ฉันเริ่มเปลี่ยนจากตารางเป็นเค้าโครงโดย divs หนึ่งในปัญหาที่ฉันพบคือสิ่งต่อไปนี้ - วิธีกดส่วนท้ายของไซต์ (ส่วนท้าย) ไปที่ด้านล่างสุดของหน้าต่างเบราว์เซอร์เพื่อให้ หน้าจะขยายเต็มความสูง โดยไม่คำนึงถึงจำนวนข้อความ และถ้าความสูงของหน้ามากกว่าความสูงของหน้าต่างเบราว์เซอร์ (เมื่อการเลื่อนปรากฏขึ้น) ส่วนท้ายจะยังคงอยู่ในตำแหน่งที่เหมาะสม

แม้ว่าตารางจะแก้ปัญหานี้โดยการระบุความสูงของตารางและ/หรือเซลล์ที่ซ้อนอยู่ในตารางเท่านั้น แต่เมื่อใช้ CSS ในโครงร่างบล็อก ก็จะใช้วิธีการที่แตกต่างไปจากเดิมอย่างสิ้นเชิง

ในกระบวนการฝึกฝน ฉันได้ค้นพบ 5 วิธีในการกดส่วนท้ายไปที่ด้านล่างสุดของหน้าต่างเบราว์เซอร์โดยใช้ CSS

รหัส HTML ของวิธีการที่นำเสนอทั้งหมดมีโครงสร้างดังต่อไปนี้ (ความแตกต่างเพียงอย่างเดียวคือรหัส CSS):

โค้ด CSS ด้านล่างมีเฉพาะคุณสมบัติที่จำเป็นน้อยที่สุดในการนำเมธอดที่เกี่ยวข้องไปใช้ สำหรับแต่ละรายการคุณสามารถดูตัวอย่างสดได้

วิธีแรก

ส่วนท้ายถูกกดลงโดยการวางตำแหน่งแบบสัมบูรณ์ และดึงความสูงของบล็อกหลัก (html , body และ .wrapper) ขึ้น 100% ในกรณีนี้ เนื้อหา block.content จำเป็นต้องระบุการเยื้องด้านล่าง ซึ่งเท่ากับหรือมากกว่าความสูงของส่วนท้าย มิฉะนั้น การเยื้องหลังจะปิดเนื้อหาบางส่วน

* ( ขอบ: 0; ช่องว่างภายใน: 0; ) html, เนื้อหา ( ความสูง: 100%; ) .wrapper ( ตำแหน่ง: สัมพัทธ์; ความสูงขั้นต่ำ: 100%; ) .content ( ช่องว่างด้านล่าง: 90px; ) .footer ( ตำแหน่ง : สัมบูรณ์; ซ้าย: 0; ด้านล่าง: 0; ความกว้าง: 100%; ความสูง: 80px; )

วิธีที่สอง

ส่วนท้ายถูกกดลงโดยยืดบล็อกเนื้อหาและ "พาเรนต์" ของบล็อกให้เต็มความสูงของหน้าต่างเบราว์เซอร์ และยกส่วนท้ายขึ้นผ่านระยะขอบลบ (ขอบบนสุด) เพื่อกำจัดการเลื่อนแนวตั้งที่ปรากฏขึ้น ในกรณีนี้จำเป็นต้องระบุความสูงของชั้นใต้ดินและจะต้องเท่ากับค่าการเยื้อง

* ( margin: 0; padding: 0; ) html, body, .wrapper ( ความสูง: 100%; ) .content ( box-sizing: border-box; min-height: 100%; padding-bottom: 90px; ) ส่วนท้าย ( ความสูง: 80px; ขอบด้านบน: -80px; )

เนื่องจากคุณสมบัติ box-sizing: border-box เราไม่อนุญาตให้กล่อง .content มีความสูงเกิน 100% ดังนั้น ในกรณีนี้ min-height: 100% + padding-bottom: 90px เท่ากับ 100% ของความสูงหน้าต่างเบราว์เซอร์

วิธีที่สาม

เป็นสิ่งที่ดีเพราะไม่เหมือนกับวิธีอื่น (ยกเว้นวิธีที่ 5) ความสูงของส่วนท้ายไม่สำคัญ

* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( display: table; height: 100%; ) .content ( display: table-row; height: 100%; )

ที่นี่ เราเลียนแบบลักษณะการทำงานของตารางโดยเปลี่ยนบล็อก .wrapper เป็นตาราง และบล็อก .content เป็นแถวของตาราง (จอแสดงผล: ตาราง และ จอแสดงผล: คุณสมบัติแถวของตาราง ตามลำดับ) ด้วยเหตุนี้ เช่นเดียวกับความจริงที่ว่าบล็อก .content และคอนเทนเนอร์หลักทั้งหมดถูกตั้งค่าเป็นความสูง 100% เนื้อหาจึงขยายเต็มความสูง แต่ลบด้วยความสูงของส่วนท้ายซึ่งกำหนดโดยอัตโนมัติ - การจำลองตารางไม่อนุญาตให้ส่วนท้ายรวบรวมข้อมูลเกินความสูงของหน้าต่างเบราว์เซอร์

เป็นผลให้ส่วนท้ายถูกกดไปที่ด้านล่าง

วิธีที่สี่

วิธีนี้ไม่เหมือนกับวิธีก่อนหน้าและความพิเศษอยู่ที่การใช้ฟังก์ชัน calc() CSS และหน่วยวัด vh ซึ่งรองรับโดยเบราว์เซอร์สมัยใหม่เท่านั้น ที่นี่คุณจำเป็นต้องทราบความสูงที่แน่นอนของชั้นใต้ดิน

* ( margin: 0; padding: 0; ) .content ( min-height: calc(100vh - 80px); )

100vh คือความสูงของหน้าต่างเบราว์เซอร์ และ 80px คือความสูงของส่วนท้าย และด้วยความช่วยเหลือของฟังก์ชัน calc() เราจะลบค่าที่สองออกจากค่าแรก โดยการกดส่วนท้ายลงไปด้านล่าง

คุณสามารถค้นหาว่าเบราว์เซอร์ใดบ้างที่รองรับ calc() และ vh ได้ที่ caniuse.com โดยใช้ลิงก์ต่อไปนี้: รองรับฟังก์ชัน calc(), รองรับหน่วย vh

วิธีที่ห้า (ที่เกี่ยวข้องมากที่สุด)

นี่เป็นวิธีที่ดีที่สุดในการนำเสนอทั้งหมด แต่ใช้ได้เฉพาะในเบราว์เซอร์สมัยใหม่เท่านั้น เช่นเดียวกับวิธีที่สาม ความสูงของส่วนท้ายไม่สำคัญ

* ( margin: 0; padding: 0; ) html, body ( ความสูง: 100%; ) .wrapper ( display: flex; flex-direction: คอลัมน์; min-height: 100%; ) .content ( flex: 1 0 auto ; ) .footer ( ยืดหยุ่น: 0 0 อัตโนมัติ; )

คุณสามารถเรียนรู้เกี่ยวกับการสนับสนุนเบราว์เซอร์สำหรับคุณสมบัติ flex ได้