GORAGOD.com

freelance, web developer, web designer, hosting, domain name

ให้ข้อความ (หรือกรอบ) ชิดด้านล่างของกรอบ (อีกที)

Page Layout แบบที่ แสดง Footer ติดอยู่ด้านล่างตลอด แม้เนื้อหาจะสั้น

<style type="text/css">
.container {
  width:100%;
  height:100px; /* ต้องกำหนดความสูงให้คงที่ */

  border:1px solid red; /* กำหนดกรอบให้เห็นภาพ */
  position:relative; /* กำหนดให้เป็น container */
}
.bottom {
  position:absolute; /* ตำแหน่งเทียบกับ container */
  bottom:0; /* กำหนดให้ชิดด้านล่าง */
  
  text-align:center; /* 2 บรรทัดนี้ถ้าต้องการให้ข้อความอยู่กลาง */
  width:100%;

  border:1px solid green; /* กำหนดกรอบให้เห็นภาพ */
}
</style>

<div class="container"><div class="bottom">text</div></div>

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

0SHAREFacebookLINE it!
^