为什么当我的div的高度设置为0时，它仍然显示？
我知道这可能是一个以前被问过的问题，但我还没有找到一个帖子或其他问题来解决这个问题。
我想用Javascript通过切换#mobileMenu div的高度来制作一个下拉移动菜单。我希望div在文档加载时的初始高度为0，并在单击触发按钮时添加它的完整高度。唯一的问题是，当我将div的初始高度设置为0时，文档仍然显示高度为27.59px的div，这对我来说没有多大意义。
我尝试添加：overflow: hidden; / line-height: 0; / display: block，但无论我做什么，div的高度都不会低于27.59px。我甚至完成了Javascript功能，div将打开到154px的高度，但当它关闭时，它会返回到27.59px而不是0。
代码语言：javascript运行复制const openBtn = document.querySelector('.open');
const closeBtn = document.querySelector('.close');
const mobileMenu = document.getElementById('mobileMenu');
openBtn.addEventListener('click', e => {
mobileMenu.classList.remove('hidden');
mobileMenu.classList.add('active');
openBtn.style.display = 'none';
closeBtn.style.display = 'block';
});
closeBtn.addEventListener('click', e => {
mobileMenu.classList.remove('active');
mobileMenu.classList.add('hidden');
openBtn.style.display = 'block';
closeBtn.style.display = 'none';
});代码语言：javascript运行复制* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
}
/* Header */
header {
display: flex;
justify-content: space-around;
align-items: center;
padding: .5rem;
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
header h2 {
font-family: 'Calistoga';
letter-spacing: 2px;
}
header i {
font-size: 1.5rem;
}
header i:hover {
cursor: pointer;
}
header i.close {
display: none;
}
/* Mobile Nav */
#mobileMenu {
padding: .8rem 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
position: fixed;
top: 92px;
left: 0;
right: 0;
overflow: hidden;
transition: height .7s ease-in-out;
}
#mobileMenu.hidden {
height: 0;
line-height: 0;
display: block;
}
#mobileMenu.active {
height: 154px;
}
.mobile-nav {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
list-style: none;
}
.mobile-nav li {
padding: .3rem 0;
}
.mobile-nav li a {
text-decoration: none;
font-size: 1.2rem;
color: #000;
}代码语言：javascript运行复制
Website Header
不管有没有overflow: hidden; / line-height: 0; / display: block，结果都是一样的。
任何帮助都将不胜感激。谢谢您抽时间见我。