Thuộc tính window.outerHeight trả về chiều cao toàn bộ cửa sổ trình duyệt (kể cả thanh địa chỉ, tab, bookmark bar, thanh cuộn ngang, viền) tính bằng pixel.
Cú pháp
window.outerHeight
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.outerHeight</h1>
<button onclick="showOuterHeight()" class="btn">Xem chiều cao cửa sổ</button>
<div class="show"></div>
<script>
function showOuterHeight() {
document.querySelector('.show').innerHTML = 'Chiều cao cửa sổ (outerHeight): ' + window.outerHeight + 'px';
}
</script>
</body>
</html>
Kết quả
Nhấn nút → hiển thị chiều cao toàn bộ cửa sổ browser.
So sánh: innerHeight = chiều cao viewport (nội dung). Hữu ích cho responsive design, tính toán layout, detect fullscreen mode.