js獲取html元素并設置高度為100vh-鍵盤高度

獲取HTML元素并設置高度為(100vh - 鍵盤高度)

我將設計一個頁面，展示如何獲取HTML元素并動態設置其高度為視口高度減去鍵盤高度，這在移動設備上特別有用，可以避免鍵盤遮擋內容。

設計思路

創建一個帶有輸入框的界面，模擬鍵盤彈出場景
使用JavaScript檢測窗口大小變化并動態計算合適的高度
提供可視化反饋，顯示當前計算的高度值
設計響應式布局，確保在各種設備上都能正常工作

下面是完整的實現代碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>動態高度調整示例</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);color: #333;min-height: 100vh;padding: 20px;display: flex;flex-direction: column;align-items: center;}.container {width: 90%;max-width: 800px;background: rgba(255, 255, 255, 0.95);border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);padding: 25px;margin: 20px 0;display: flex;flex-direction: column;gap: 20px;}header {text-align: center;margin-bottom: 10px;}h1 {color: #2c3e50;font-size: 2.2rem;margin-bottom: 10px;}.description {color: #7f8c8d;font-size: 1.1rem;line-height: 1.6;}.content-box {border: 2px solid #e0e0e0;border-radius: 10px;overflow: hidden;transition: height 0.3s ease;background: white;}.content-header {background: #3498db;color: white;padding: 15px;display: flex;justify-content: space-between;align-items: center;}.content-body {padding: 20px;overflow-y: auto;}.height-info {display: flex;justify-content: space-between;background: #f8f9fa;padding: 15px;border-radius: 8px;margin-top: 10px;}.info-item {text-align: center;flex: 1;}.info-value {font-size: 1.8rem;font-weight: bold;color: #3498db;}.info-label {color: #7f8c8d;font-size: 0.9rem;}.input-group {display: flex;flex-direction: column;gap: 10px;margin: 20px 0;}.input-group label {font-weight: 600;color: #2c3e50;}.input-group input, .input-group textarea {padding: 15px;border: 2px solid #ddd;border-radius: 8px;font-size: 16px;transition: border-color 0.3s;}.input-group input:focus, .input-group textarea:focus {border-color: #3498db;outline: none;}.visual-keyboard {background: #e0e0e0;border-radius: 8px;padding: 15px;text-align: center;margin-top: 20px;display: none;}.keyboard-toggle {padding: 12px 20px;background: #e74c3c;color: white;border: none;border-radius: 8px;cursor: pointer;font-size: 16px;font-weight: 600;transition: background 0.3s;margin-top: 10px;display: flex;align-items: center;justify-content: center;gap: 8px;}.keyboard-toggle:hover {background: #c0392b;}.instructions {background: #fff8e1;border-left: 4px solid #ffc107;padding: 15px;border-radius: 4px;margin-top: 20px;}.instructions h3 {color: #d35400;margin-bottom: 10px;}.instructions ul {padding-left: 20px;}.instructions li {margin-bottom: 8px;line-height: 1.5;}@media (max-width: 768px) {.container {width: 95%;padding: 15px;}h1 {font-size: 1.8rem;}.height-info {flex-direction: column;gap: 15px;}.visual-keyboard {display: block;}}@media (max-width: 480px) {h1 {font-size: 1.5rem;}.description {font-size: 1rem;}.info-value {font-size: 1.5rem;}}</style>
</head>
<body><div class="container"><header><h1>動態高度調整示例</h1><p class="description">此頁面演示如何獲取HTML元素并設置其高度為(100vh - 鍵盤高度)，適用于移動設備避免鍵盤遮擋內容。</p></header><div class="content-box" id="adjustableElement"><div class="content-header"><span>可調整高度的元素</span><span id="currentHeight">高度: 400px</span></div><div class="content-body"><div class="input-group"><label for="sampleInput">示例輸入框（點擊測試鍵盤彈出）</label><input type="text" id="sampleInput" placeholder="點擊此處測試..."></div><div class="input-group"><label for="sampleTextarea">示例文本區域</label><textarea id="sampleTextarea" rows="4" placeholder="點擊此處測試..."></textarea></div><button class="keyboard-toggle" id="keyboardToggle"><i class="fas fa-keyboard"></i> 顯示/隱藏虛擬鍵盤</button><div class="visual-keyboard" id="visualKeyboard"><p>虛擬鍵盤區域（模擬移動設備鍵盤）</p><div style="height: 200px; display: flex; justify-content: center; align-items: center; background: #c0c0c0; border-radius: 5px;"><i class="fas fa-keyboard" style="font-size: 48px; color: #666;"></i></div></div></div></div><div class="height-info"><div class="info-item"><div class="info-value" id="viewportHeight">0px</div><div class="info-label">視口高度</div></div><div class="info-item"><div class="info-value" id="keyboardHeight">0px</div><div class="info-label">鍵盤高度</div></div><div class="info-item"><div class="info-value" id="calculatedHeight">0px</div><div class="info-label">計算高度</div></div></div><div class="instructions"><h3>使用說明</h3><ul><li>在移動設備上，當鍵盤彈出時，頁面高度會發生變化</li><li>JavaScript會檢測窗口大小變化并計算合適的高度</li><li>元素高度會自動調整為: (視口高度 - 鍵盤高度)</li><li>在桌面瀏覽器中，可以點擊"顯示/隱藏虛擬鍵盤"進行測試</li></ul></div></div><script>document.addEventListener('DOMContentLoaded', function() {const adjustableElement = document.getElementById('adjustableElement');const currentHeightSpan = document.getElementById('currentHeight');const viewportHeightSpan = document.getElementById('viewportHeight');const keyboardHeightSpan = document.getElementById('keyboardHeight');const calculatedHeightSpan = document.getElementById('calculatedHeight');const keyboardToggle = document.getElementById('keyboardToggle');const visualKeyboard = document.getElementById('visualKeyboard');let keyboardVisible = false;let originalViewportHeight = window.innerHeight;// 初始更新updateHeights();// 監聽窗口大小變化window.addEventListener('resize', function() {updateHeights();});// 鍵盤切換按鈕keyboardToggle.addEventListener('click', function() {keyboardVisible = !keyboardVisible;if (keyboardVisible) {visualKeyboard.style.display = 'block';// 模擬鍵盤彈出，視口高度減少window.dispatchEvent(new Event('resize'));} else {visualKeyboard.style.display = 'none';// 模擬鍵盤收起，恢復視口高度window.dispatchEvent(new Event('resize'));}});// 更新高度函數function updateHeights() {const viewportHeight = window.innerHeight;const visualKeyboardHeight = keyboardVisible ? 200 : 0;// 在移動設備上，鍵盤彈出時會改變視口高度// 這里我們通過比較當前視口高度和原始視口高度來計算鍵盤高度const keyboardHeight = Math.max(0, originalViewportHeight - viewportHeight);// 計算合適的高度const calculatedHeight = viewportHeight - Math.max(keyboardHeight, visualKeyboardHeight);// 更新顯示信息viewportHeightSpan.textContent = `${viewportHeight}px`;keyboardHeightSpan.textContent = `${keyboardHeight}px`;calculatedHeightSpan.textContent = `${calculatedHeight}px`;// 設置元素高度adjustableElement.style.height = `${calculatedHeight}px`;currentHeightSpan.textContent = `高度: ${calculatedHeight}px`;}// 初始化時保存原始視口高度setTimeout(() => {originalViewportHeight = window.innerHeight;updateHeights();}, 100);// 添加輸入框聚焦時更新高度的邏輯（模擬移動設備行為）const inputs = document.querySelectorAll('input, textarea');inputs.forEach(input => {input.addEventListener('focus', function() {// 在移動設備上，聚焦輸入框時鍵盤彈出，這里我們模擬這個行為if (window.innerWidth <= 768) { // 僅在移動設備上模擬keyboardVisible = true;visualKeyboard.style.display = 'block';updateHeights();}});input.addEventListener('blur', function() {if (window.innerWidth <= 768) {keyboardVisible = false;visualKeyboard.style.display = 'none';updateHeights();}});});});</script>
</body>
</html>