如何让按钮随下拉动画的高度变化始终固定在容器底部？

这个需求其实很好搞定，核心就是让按钮牢牢“粘”在容器底部，同时给容器的高度变化加上平滑过渡就行。我给你两种实用方案，你可以根据自己的场景选：

方案一：绝对定位 + CSS过渡 #

这是最经典的实现方式，兼容性也很好：

HTML结构 #

<div id="div">
  <button id="btn">切换下拉</button>
</div>

CSS样式 #

#div {
  background-color: gray;
  font-family: Arial, sans-serif;
  position: relative; /* 让按钮的绝对定位相对于这个容器 */
  height: 50px; /* 初始高度 */
  transition: height 0.3s ease; /* 给高度变化加过渡动画 */
  overflow: hidden; /* 防止内容溢出（如果容器里有其他内容的话） */
}

#div.dropdown {
  height: 200px; /* 切换后的高度 */
}

#btn {
  position: absolute;
  bottom: 10px; /* 离底部留点间距，也可以设为0 */
  left: 10px;
}

JavaScript代码 #

（修正了你原代码里的小疏漏）

var btn = document.getElementById("btn");
var div = document.getElementById("div");

function dropDownAnimation() {
  div.classList.toggle("dropdown");
}

btn.onclick = dropDownAnimation; // 这里要加分号哦

方案二：Flex布局 + 过渡 #

如果你的项目不用考虑旧浏览器，用Flex布局会更简洁，不用写定位：

CSS样式（只改容器和按钮部分） #

#div {
  background-color: gray;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 把按钮推到底部 */
  height: 50px;
  transition: height 0.3s ease;
  overflow: hidden;
}

#div.dropdown {
  height: 200px;
}

#btn {
  margin: 10px; /* 用margin控制按钮和容器的间距 */
}

小提示 #

• 两种方案的核心都是给容器的height属性加上transition，这样切换类名时高度变化会有平滑动画。
• 如果容器里有其他内容（比如下拉菜单），只要把内容放在按钮外面，就能随着容器高度变化自动显示/隐藏。
• 过渡的时长和缓动函数可以自己调整，比如把0.3s改成0.5s，ease改成linear之类的，适配不同的交互节奏。

内容的提问来源于stack exchange，提问作者MWR