如何在布局底部膨胀对话框？

<div id="dialog-container">
  <div id="dialog-content">
    <!-- 对话框内容 -->
  </div>
</div>
<button id="open-dialog-btn">打开对话框</button>

#dialog-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
}

#dialog-content {
  /* 对话框内容的样式 */
}

var dialogContainer = document.getElementById('dialog-container');
var openDialogBtn = document.getElementById('open-dialog-btn');

openDialogBtn.addEventListener('click', function() {
  dialogContainer.style.height = '200px'; // 设置对话框容器的高度，展开对话框
});