Thuộc tính window.innerHeight trong HTML

Thuộc tính window.innerHeight trả về chiều cao khu vực hiển thị nội dung (viewport) của cửa sổ, không tính giao diện trình duyệt.

Cú pháp

window.innerHeight

Ví dụ

<!DOCTYPE html>
<html>
<style>
  body { color: #000; height: 100vh; background-color: #8BC6EC; background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%); text-align: center; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
  .show { font-size: 1.2rem; }
</style>
<body>
<h1>Demo window.innerHeight</h1>
<button onclick="showInnerHeight()" class="btn">Xem chiều cao viewport</button>
<div class="show"></div>
<script>
  function showInnerHeight() {
    document.querySelector('.show').innerHTML = 'Chiều cao viewport (innerHeight): ' + window.innerHeight + 'px';
  }
</script>
</body>
</html>

Kết quả

Nhấn nút → hiển thị chiều cao vùng hiển thị web.

Dùng cho: vh units (1vh = 1% innerHeight), full-screen sections, canvas sizing, lazy-load trigger (IntersectionObserver tốt hơn). Kết hợp innerWidth/innerHeight = viewport size.