在前端開發中，經常需要彈出提示框或對話框來與用戶進行交互，而CSS是控制頁面樣式的關鍵技術之一。本文將介紹如何使用CSS設置彈出框的高度。

為了方便說明，我們假設已經有一個彈出框的HTML結構如下：

<div class="dialog">
<h2 class="title">這是一個對話框</h2>
<div class="content">
<p>這里是對話框的內容</p>
</div>
</div>

其中，dialog類是對話框的容器，title類是對話框標題，content類是對話框內容。我們需要設置對話框的高度，使其在頁面中居中并不會溢出。

首先，我們需要設置dialog的寬度和高度，并讓其定位到頁面中央。代碼如下：

.dialog {
width: 300px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

其中，position: fixed將對話框定位到視窗（viewport）中，top: 50%和left: 50%將對話框的左上角定位到視窗的中央，transform: translate(-50%, -50%)將對話框向左和向上移動自身寬度和高度的一半，從而使其真正居中。

接下來，我們需要設置content的高度。由于對話框的高度已經確定，我們可以使用絕對定位將content定位到對話框的頂部，并設置bottom: 0將其沿底部延伸至對話框的底部。代碼如下：

.content {
position: absolute;
top: 40px; /* 與標題的高度相同 */
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}

其中，overflow: auto可以使當對話框內容超出對話框高度時自動出現滾動條，以保證內容完全顯示。

通過以上設置，我們可以快速輕松地實現彈出框的高度定位，使其美觀實用，提升用戶體驗。