Why does my div still display when its height is set to 0?

Question

I understand this is probably a question that has been asked before, but I haven't found a post or another question that has solved this issue.

I want to make a drop down mobile menu with Javascript by toggling the height of the #mobileMenu div. I wanted the div to have an initial height of 0 when the document loads, and add its full height when the triggering button is clicked. The only issue is when I set the div's initial height to 0, the document still displays the div with a height of 27.59px which doesn't make much sense to me.

I've tried adding: overflow: hidden; / line-height: 0; / display: block but no matter what I do, the div will not go below 27.59px in height. I even completed the Javascript functionality and the div will open to 154px in height, but when closed it goes back to 27.59px instead of 0.

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';
});

* {
  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;
}

<header>
  <h2>Website Header</h2>
  <i class="fas fa-chevron-down open"></i>
  <i class="fas fa-chevron-up close"></i>
</header>

<div id="mobileMenu" class="hidden">
  <ul class="mobile-nav">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Services</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</div>

With or without the overflow: hidden; / line-height: 0; / display: block the result remains the same.

Any help would be much appreciated. Thank you for your time.

Answer 1

Using your logic but with this only change will fix it:

#mobileMenu.hidden {
  height: 0;
+ padding: 0; /*the initial padding: .8rem 0; creates the 27.59px height (0.8rem top + 0.8rem bottom)*/
  line-height: 0;
  display: block;
}

Answer 2

Try to set hidden property on mobileMenu div, and update accordingly on button click. This way you avoid messing with css classes

const openBtn = document.querySelector('.open');
const closeBtn = document.querySelector('.close');
const mobileMenu = document.getElementById('mobileMenu');

openBtn.addEventListener('click', e => {
  mobileMenu.hidden = false;
  //mobileMenu.classList.add('active');
  openBtn.style.display = 'none';
  closeBtn.style.display = 'block';
});

closeBtn.addEventListener('click', e => {
  //mobileMenu.classList.remove('active');
  mobileMenu.hidden = true;
  openBtn.style.display = 'block';
  closeBtn.style.display = 'none';
});

* {
  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;
}

<header>
  <h2>Website Header</h2>
  <i class="fas fa-chevron-down open"></i>
  <i class="fas fa-chevron-up close"></i>
</header>

<div id="mobileMenu" hidden>
  <ul class="mobile-nav">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Services</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</div>

Answer 3

How about making the default for the menu your hidden state and removing the hidden class. Block is the default display for a div so that's not needed. Try setting padding on #mobileMenu to 0, and setting margin on .mobile-nav to .8rem 0