javascript - 使按钮随着下拉菜单的动画高度变化而变化

Question

所以，我有一个问题。我想做一个简单的下拉动画，我把这个按钮放在 div 原始高度的底部。当我切换一个类时，div 的高度会发生变化，我希望按钮始终位于底部。我怎么做？代码就在这里:

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

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


btn.onclick = dropDownAnimation

.div {
  background-color: gray;
  font-family: Arial;
  font-size: 18px;
  width: 150px;
  transition: 500ms ease;
}

.div > button {
  width: 50px;
  height: 50px;
  font-size: 10px;
}

.dropdown {
  height: 300px;
}

#btn {
  margin-top: 15px;
}

<div class="div" id="div">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quasi pariatur illo earum excepturi ipsam.
  <button>Make me stay at bottom!</button>
</div>

<button id="btn">Press me for dropdown</button>

请不要回答 jQuery。

Answer 1

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

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


btn.onclick = dropDownAnimation

.div {
     position:relative;
     padding-bottom:50px;
     background-color: gray;
     font-family: Arial;
     font-size: 18px;
     width: 150px;
     transition: 500ms ease;
}
 .div > button {
     position: absolute;
     left: 0%;
     bottom: 0%;
     width: 50px;
     height: 50px;
     font-size: 10px;
}
 .dropdown {
     height: 300px;
}
 #btn {
     margin-top: 15px;
}

<div class="div" id="div">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quasi pariatur illo earum excepturi ipsam.
  <button>Make me stay at bottom!</button>
</div>

<button id="btn">Press me for dropdown</button>