<div>元素是HTML中的一個標簽，用于定義一個文檔的區域，可以將文檔劃分成不同的部分。在CSS中，我們可以通過設置<div>元素的高度來控制該區域的顯示效果。而innerHeight是JavaScript中的一個屬性，用于獲取當前視口的高度。在本文中，我們將討論如何使用innerHeight屬性來設置<div>元素的高度，從而實現頁面布局的效果。
，我們來看一個簡單的代碼示例。假設我們有一個<div>元素，并且我們希望將其高度設置為當前視口高度的一半。我們可以使用JavaScript的innerHeight屬性來獲取當前視口的高度，并將其賦值給<div>元素的高度屬性。
代碼示例如下：

<p><div id="myDiv"></div></p>
<br>
<p>const myDiv = document.getElementById("myDiv");</p>
<p>myDiv.style.height = (window.innerHeight / 2) + "px";</p>

在上面的代碼中，我們通過document.getElementById()方法獲取到了id為"myDiv"的<div>元素，并將其賦值給了變量myDiv。然后，我們使用innerHeight屬性獲取到了當前視口的高度，除以2后再加上"px"單位，最后將結果作為<div>元素的高度。
接下來，我們將通過另外兩個代碼示例來進一步說明div高度innerHeight的用法。在這兩個示例中，我們將使用CSS的flex屬性來實現<div>元素的自適應高度。
代碼示例一：

<p>.container {</p>
<p>  display: flex;</p>
<p>  height: 100vh;</p>
<p>}</p>

在上面的代碼中，我們定義了一個名為.container的CSS類，通過display: flex來設置其為彈性布局。然后，我們通過height: 100vh來將容器的高度設置為整個視口的高度。
代碼示例二：

<p><div class="container"> </p>
<br>
<p>  <div class="header">Header</div></p>
<p>  <div class="content">Content</div></p>
<p>  <div class="footer">Footer</div></p>
<br>
<p></div></p>
<br>
<p>.container {</p>
<p>  display: flex;</p>
<p>  flex-direction: column;</p>
<p>  height: 100vh;</p>
<p>}</p>
<br>
<p>.header {</p>
<p>  height: 20%;</p>
<p>}</p>
<br>
<p>.content {</p>
<p>  flex-grow: 1;</p>
<p>}</p>
<br>
<p>.footer {</p>
<p>  height: 10%;</p>
<p>}</p>

在上面的代碼中，我們定義了一個包含頭部、內容和底部的容器，通過設置.flex屬性為display: flex和flex-direction: column，我們將其中的三個子元素按垂直方向布局，并使容器的高度占整個視口的100%。
.header元素的高度被設置為20%，.content元素的高度使用flex-grow: 1來將剩余空間平均分配，.footer元素的高度被設置為10%。
通過以上兩個代碼示例，我們可以看到通過使用div的高度innerHeight屬性，我們可以實現多種頁面布局效果，使頁面元素靈活適應不同的視口高度。