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

ทำให้ความสูงหน้าเว็บพอดีกับหน้าจอ (Full Height) ด้วย HTML/CSS

3 วิธีหลัก

1. Relative Height (HTML, Body = 100%)

html, body {
    height: 100%;
    margin: 0;
}

2. Fixed Positioning

#main {
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

3. Viewport Units (สมัยใหม่ แนะนำ)

.full-height {
    height: 100vh; /* 100% Viewport Height */
    min-height: 100vh; /* ป้องกัน collapse */
}

vh = 1% ของ Viewport Height รองรับทุกเบราว์เซอร์สมัยใหม่ (IE9+)