Почему дочерний div не удаляется, когда высота родительского div уменьшается до 0?

Question

Я новичок в HTML и CSS. Так что терпите меня.

У меня header div, который содержит nav div, который содержит li div. Я пытался реализовать кнопку, которая скрывала бы header. Я могу скрыть header, но я все еще могу видеть nav и li div.

Следующие свойства css:

#header {
  z-index: 100;
  left:0;
  top: 0px;
  height: 60px;
  transition: max-height 0.2s ease-out;
  width: 100%;
  position: fixed;
    nav {
       max-width: 650px;
       margin: 0 auto;
       padding: 0 10px;
       li {
          font-family: 'OpenSansLight', "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: normal;
          list-style: none;
          display: inline;
          color: white;
          line-height: 50px;
       }
    }
}

Выше приведен файл Jekyll scss, который генерирует соответствующий css. Функция JavaScript выглядит следующим образом:

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    var content = this.nextElementSibling;
    console.log(content.innerHTML);
    if (content.style.height){
      content.style.height = null;
    } else {
      content.style.height = content.scrollHeight + "px";
    } 
  });
}

Спасибо.

Answer 1

Используйте свойство display как none. Он также скроет дочерние div. Используйте так: display: 'none';