วิธีทำ Css sticky footer [It's work]
อืมม์ เริ่มมั่วไปทุกทีละ jQueryTips มี Css โผล่มาด้วย 555+
หลังจากที่ผมหาวิธีตั้งนานที่จะทำให้ footer มันอยู่ติด ข้างล่าง โดยที่ ยังยิดตาม content แล้วก็ใช้ได้ ครบทุก browser ลองมาหลายๆ วิธี แม้กระทั้ง เขียน js เพิ่มคำนวน scrolling ก็ยังเคยมาแล้ว (มันกระตุก)
จนในวันนี้ได้มา วิธีที่ work ที่สุด แถมได้ทุก browser ไม่เพี้ยน ยืดขยาย ได้ตามแต่ content
(ทดสอบใน: IE6+7, FF, Win Safari, Opera)
มาลองดูกัน โคด ไม่ยากเลย
Css
-
<style type="text/css">
-
html, body {
-
margin: 0 auto;
-
height: 100%;
-
}
-
#container {
-
min-height: 100%;
-
height: auto !important;
-
height: 100%;
-
margin: 0 auto -100px;
-
background-color: #DBDBDB;
-
}
-
#footer, #push {
-
height: 100px;
-
}
-
#footer {
-
background-color: red;
-
}
-
</style>
HTML
-
<body>
-
-
<div id="container">
-
Header and content
-
-
<div id="push"></div>
-
</div>
-
-
<div id="footer">Footer</div>
-
</body>
เท่่านี้เองง่ายๆ หัวใจสำคัญมันอยู่ที่ push ที่คอยดัน footer ตามขนาด margin ลองดูละกัน สำหรับผม มันยอดมาก !
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
ใช้ได้จริงๆ ด้วย เคยนั่งทำไปทำมาเหมือนกัน แล้วก็ทำไม่ได้ = =”
เดี๋ยวเอาไปลองแก้กับงานเก่าดู อุๆ
เป็นแนวคิดที่เรียบง่ายแต่ได้ประโยชน์มากเลยคับ อุอุ
มี code น่าสนใสมาเผยแพร่เสมอเลยนะครับ สุดยอด
โอ ใช้ margin auto -100 เป็นตัวช่วย ยอดเยี่ยมครับๆ
เยี่ยมเลย ขอเก็บไปเป็นความรู้นะครับผม ^^
ติดตาม
ทำให้สมองมีรอยหยักเพิ่มอีกแล้ว
สูตรนี้ ใช้ได้แค่ level แรกชั้นนอกสุดนะครับ ถ้าต้องการทำ layout ที่ต้องมี height 100% ข้างในอีกจะใช้ไม่ได้ครับ
ลองแบบนี้ดูนะครับ
br {clear:both;}
Header and content
Footer