CSS彈窗是我們常常需要用到的一種交互效果，但是在實際應用中，我們可能會遇到一些問題，比如彈窗高度適應不了內容的問題。本文將介紹如何使用CSS實現彈窗高度自適應。

.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 70vh;
overflow-y: auto;
}
.popup__content {
padding: 20px;
}

首先，我們需要設置彈窗的基本樣式，這里我們以一個類名為popup的div元素為例。使用fixed定位使其在頁面中居中顯示，并設置其最大高度為70vh，超出部分使用縱向滾動條滾動顯示。同時，需要在里面再嵌套一個類名為popup__content的元素來承載具體的內容，這里我們設置了20px的padding值。

.popup__content--dynamic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease;
}

接下來，我們需要在popup__content里添加一個類名為popup__content--dynamic的元素，用來承載彈窗內容的具體內容。這里我們設置其寬高為100%、使用position:absolute屬性將其定位到最上層，并使用opacity、visibility和pointer-events屬性使其默認狀態下不可見。這樣設置可以確保它不會影響到父級元素的高度。

.popup__content--dynamic.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

當我們給popup__content--dynamic添加一個active類名時，彈窗的高度將自適應于其內容，并將其設置為可見狀態。

document.querySelectorAll('.popup__content--dynamic').forEach(content => {
const target = document.querySelector(content.dataset.target);
content.innerHTML = target.innerHTML;
target.addEventListener('input', () => {
content.innerHTML = target.innerHTML;
content.classList.add('active');
});
});

最后，在我們的JavaScript代碼中，我們需要綁定目標元素的input事件，并將其內容同步到popup__content--dynamic元素中，并將其設置為可見狀態，從而實現動態高度的自適應效果。

通過這些步驟，我們就可以輕松地使用CSS實現彈窗高度自適應的效果了。