设置height:0无法完全隐藏DOM元素的技术求助

我懂你的困扰——明明设置了height: 0，却因为padding的存在，元素始终没法完全隐藏，还得保留平滑过渡效果不能用display: none对吧？这问题其实和box-sizing: border-box的特性有关：它确实把border和padding算进了元素的总高度里，但当你把height设为0时，padding并不会自动归零，所以元素还是会被padding撑出一部分高度。

给你两个可行的解决方案，都能完美保留过渡动画：

方案一：同时过渡height和padding #

既然padding是“漏网之鱼”，那我们直接把它也加入过渡队列，隐藏时同步把padding设为0就行：

修改后的CSS #

.banner{
  height: 40px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  background: #2fc5c5;
  color: #fff;
  padding: 7px 15px;
  /* 同时对height和padding添加过渡效果 */
  transition: height .3s ease, padding .3s ease;
  border: 1px solid #10b5b4;
}

修改后的JS #

var body = document.body;
var banner = document.getElementById('banner');
var close = document.getElementById('close');
var reset = document.getElementById('reset');

close.onclick = closeBanner;
reset.onclick = resetHeight;

function closeBanner(){
  banner.style.height = 0;
  // 隐藏时同步将padding设为0
  banner.style.padding = '0';
}

function resetHeight(){
  banner.style.height = '40px';
  // 恢复原padding值
  banner.style.padding = '7px 15px';
}

方案二：用max-height代替height（更推荐） #

这种方法不用额外处理padding，只需要把height换成max-height，设置一个比元素实际高度大的初始值，隐藏时把max-height设为0即可。此时padding会被overflow: hidden完全裁切掉，过渡效果依然丝滑：

修改后的CSS #

.banner{
  /* 用max-height替代height，值设得比实际高度大就行 */
  max-height: 100px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  background: #2fc5c5;
  color: #fff;
  padding: 7px 15px;
  transition: max-height .3s ease;
  border: 1px solid #10b5b4;
}

修改后的JS #

var body = document.body;
var banner = document.getElementById('banner');
var close = document.getElementById('close');
var reset = document.getElementById('reset');

close.onclick = closeBanner;
reset.onclick = resetHeight;

function closeBanner(){
  banner.style.maxHeight = '0';
}

function resetHeight(){
  banner.style.maxHeight = '100px';
}

两种方案都能实现你要的平滑隐藏效果，方案二更简洁，不需要额外维护padding的状态，我个人更推荐这个。

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