วิธียืดองค์ประกอบให้เต็มความสูงหน้าต่างเบราว์เซอร์ด้วย CSS

Full Height Element: ให้ Div เต็ม Viewport Height (100vh)

จุดสำคัญคือ html, body { height: 100%; margin: 0; } แล้ว child ใส่ height: 100% หรือใช้ min-height: 100vh โดยตรง (vh = viewport height)

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    .fullHeight {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      height: 100%; background: rgb(135, 27, 207); color: white;
      font-size: 40px; padding: 40px;
    }
  </style>
</head>
<body>
  <div class="fullHeight">Div นี้จะยืดเต็มความสูงและกว้างของหน้าต่าง</div>
</body>
</html>

วิธีทันสมัย (แนะนำ)

.fullHeight { min-height: 100vh; }

ไม่ต้องตั้ง html/body height 100% – ใช้ viewport unit โดยตรง สะดวกกว่า

กรณีพิเศษ: Mobile Browser Address Bar

บนมือถือ 100vh รวม address bar ด้วย ทำให้เนื้อหาล้น ใช้ 100dvh (dynamic viewport height) หรือ 100svh (small viewport height) – รองรับ Chrome 108+, Safari 15.4+

.fullHeight { min-height: 100dvh; } /* ปรับตัวตาม address bar */

Flexbox/Grid Full Height

body { display: flex; min-height: 100vh; margin: 0; }
.main { flex: 1; } /* ขยายเต็มพื้นที่ว่าง */

เหมาะสำหรับ Layout: Header + Main (full) + Footer