home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

Flexbox และ Vertical Scroll ในแอปพลิเคชันเต็มหน้าจอด้วย Flexbox API ใหม่

ใช้ Flexbox สร้าง Layout เต็มหน้าจอที่มี Scroll เฉพาะส่วนเนื้อหา

คุณสมบัติ flex เป็น shorthand ของ flex-grow, flex-shrink, flex-basis

เทคนิคสำคัญ: ตั้ง height: 0 หรือ min-height

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 0px; /* บังคับให้ขยายเต็มพื้นที่ที่เหลือ */
}

/* หรือตั้ง min-height */
#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* เทียบเท่า min-height: 100px */
}

การตั้ง height: 0 ร่วมกับ flex: 1 1 auto จะทำให้ element ขยายเต็มพื้นที่ว่าง และ scroll ได้เมื่อเนื้อหาเยอะ