คุณสมบัติ position กำหนดวิธีการจัดตำแหน่งของ element (static, relative, absolute, fixed, หรือ sticky)
ในตัวอย่างด้านล่าง ไม่ต้องกำหนดความสูงเป็นเปอร์เซ็นต์ และไม่ต้องใช้ jQuery:
.mainbody {
position: absolute; /* ตั้งตำแหน่งเป็น absolute */
top: 30px; /* ความสูงของ Header = 30px */
bottom: 10px; /* ความสูงของ Footer = 10px */
width: 100%; /* ความกว้างเต็มหน้าจอ */
}
หลักการทำงาน: การตั้ง top และ bottom พร้อมกันกับ position: absolute จะทำให้ element ขยายเติมพื้นที่ระหว่าง Header และ Footer อัตโนมัติ
