Неизвестное пространство, оставленное навигационным меню в HTML

Question

У меня странный пробел в середине моей работы в HTML.

Занимаемое пространство соответствует пространству меню, поэтому я предполагаю, что причина, но я не знаю, как ее решить. Но я использовал transform-Y() для отправки меню на 150%, поэтому оно не будет отображаться на экране, пока не будет нажата кнопка. Однако, когда меню исчезает, этот большой белый пробел остается позади.

Слушайте это html:

<!-- Header -->
    <header class="header">
        <div class="head">
            <div class="header-child nav-menu">
                <div class="nav-bar"></div>
                <div class="nav-bar"></div>
                <div class="nav-bar"></div>
            </div>
            <div class="header-child logo">
                Xpresschow
            </div>
        </div>

        <div class="menu">
            <div class="menu-container">
                <div class="menu-item">Home</div>
                <div class="menu-item">About</div>
                <div class="menu-item">Faq</div>
                <div class="menu-item sign-in">Sign In</div>
            </div>
        </div>
    </header>
    <!-- Header -->

css:

.menu {
    background: var(--primaryDark);
    color: var(--primaryLight);
    transform: translateY(-150%);
    position: relative;
    z-index: 0;
    transition: all ease .5s;
}

.menu-container {
    height: 300px;
    padding: 1rem;
    align-items: center;
    flex-direction: column;
    display: flex;
    justify-content: space-around;
}

.show {
    transform: translateY(0);
}

.menu-item {
    cursor: pointer;
    font-size: 1.5rem;
    transition: all ease .5s;
}

.menu-item:hover {
    transform: scale(1.2);
}

Заголовок CSS:

header {
    background: var(--primaryLight);
    min-height: 4%;
    box-shadow: 0px 10px 14px 1px rgba(0, 0, 0, 0.84);
    transition: all ease 1s;
}

.head {
    width: 100%;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    padding: 0 1rem;
    justify-content: space-between;
    transition: all ease 1s;
}

.sticky {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%
}

Здесь - это скрипка.

Answer 1

Сочетание .header { min-height: 4%} и .menu { transform: translateY(-150%); } вызывает проблему. Браузер не знает 150% какой высоты, так как .menu не имеет заданной c высоты.

Подсчитывая расстояние и тень от ящика, вы должны как минимум переместиться на .menu 390 пикселей, чтобы убрать его с пути

• удалить .header { min-height: 4%; }
• set .menu { transform: translateY(-390px); height: 0; } для перемещения вверх и скрытия содержимого
• установить .show { transform: translateY(0); height: auto; } и все готово

изменить / переключить <div class="menu show">, чтобы увидеть эффект ....

код:

:root {
    --primaryColor: #19323C;
    --secondaryColor: rgb(255, 139, 162);
    --primaryDark: #19323C;
    --primaryLight: #fff;
    --accent: #8C5E58;
}


.header {
    background: var(--primaryLight);
/*    min-height: 4%;  REMOVE */
    box-shadow: 0px 10px 14px 1px rgba(0, 0, 0, 0.84);
    transition: all ease 1s;
}

.head {
    width: 100%;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    padding: 0 1rem;
    justify-content: space-between;
    transition: all ease 1s;
}

.sticky {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%
}

.nav-menu {
    max-width: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
}

.nav-bar {
    width: 45px;
    height: 5px;
    margin: 5px 0;
    background: var(--primaryColor);
}

.logo {
    font-family: var(--logoFont);
    margin-left: 10px;
    font-size: 2rem;
    color: var(--primaryColor);
}

.menu {
    background: var(--primaryDark);
    color: var(--primaryLight);
    transform: translateY(-390px); /* MODIFY */
    height: 0; /* ADD */
    position: relative;
    z-index: 0;
    transition: all ease .5s;
}

.menu-container {
    height: 300px;
    padding: 1rem;
    align-items: center;
    flex-direction: column;
    display: flex;
    justify-content: space-around;
}

.show {
    transform: translateY(0);
    height: auto; /* ADD */
}

.menu-item {
    cursor: pointer;
    font-size: 1.5rem;
    transition: all ease .5s;
}

.menu-item:hover {
    transform: scale(1.2);
}
[outlines="1"] * { outline: 2px dashed purple }

<body outlines="0">
<header class="header">
  <div class="head">
    <div class="header-child nav-menu">
      <div class="nav-bar"></div>
      <div class="nav-bar"></div>
      <div class="nav-bar"></div>
    </div>
    <div class="header-child logo">
      Xpresschow
    </div>
  </div>

  <div class="menu">
    <div class="menu-container">
      <div class="menu-item">Home</div>
      <div class="menu-item">About</div>
      <div class="menu-item">Faq</div>
      <div class="menu-item sign-in">Sign In</div>
    </div>
  </div>
</header>

</body>