Пустое пространство в конце сайта

Question

Из-за header в конце страницы образуется пустое пространство. В header встроено раскрывающееся вниз меню

Если для header поставить display: none, то пустое пространство исчезает

Меню сделано с помощью flexbox и при нажатии на кнопку раскрывается (по умолчанию меню находится выше header (top: -1000%); при нажатии на кнопку (плюсик) меню добавляется класс active и оно перемещается под header)

Сам макет сайта тоже сделан с помощью flexbox (footer должен быть прижат к низу)

Понятия не имею как меню создает пустое пространство в конце сайта, как это взаимосвязано, поэтому прошу у вас помощи

HTML код:

<!DOCTYPE HTML>
<html>
<head>
  <title>Главная страница</title>
  </head>
  <body>


      <div id="header">

<!--МЕНЮ-->
<nav>
    <ul class="menu">
        <li><a href="#" onclick="openMenu()"> <span id="buttonMenu">+</span> </a></li>
          <ul id="submenu">
            <li class="liSubmenu1"><a href="#" class="link" onclick="subSubmenu1()"><span class="nameSubmenu">iPhone</span></a>
              <ul id="subSubmenu1">
                  <li><a href="#" class="subLink1"><span class="element">iPhone 11 Pro</span></a></li>
                  <li><a href="#" class="subLink1"><span class="element">iPhone 11</span></a></li>
                  <li><a href="#" class="subLink1"><span class="element">iPhone Xr</span></a></li>
                  <li><a href="#" class="subLink1"><span class="element">iPhone 8</span></a></li>
              </ul>
            </li>

            <li class="liSubmenu2"><a href="#" class="link" onclick="subSubmenu2()"><span class="nameSubmenu">iPad</span></a>
              <ul id="subSubmenu2">
                <li><a href="#" class="subLink2"><span class="element">iPad Pro</span></a></li>
                <li><a href="#" class="subLink2"><span class="element">iPad Air</span></a></li>
                <li><a href="#" class="subLink2"><span class="element">iPad</span></a></li>
                <li><a href="#" class="subLink2"><span class="element">iPad mini</span></a></li>
              </ul>
            </li>

            <li class="liSubmenu3"><a href="#" class="link" onclick="subSubmenu3()"><span class="nameSubmenu">Mac</span></a>
              <ul id="subSubmenu3">
                <li><a href="#" class="subLink3"><span class="element">Macbook Air</span></a></li>
                <li><a href="#" class="subLink3"><span class="element">Macbook Pro 13"</span></a></li>
                <li><a href="#" class="subLink3"><span class="element">iMac Pro</span></a></li>
                <li><a href="#" class="subLink3"><span class="element">Mac Pro</span></a></li>
              </ul>
            </li>
          </ul>
        </ul>
</nav>
<img id="logo" src="images/logo.jpg">
<span id="korzina">Корзина</span>

</div>

<!--МЕНЮ-->






<div id="content">
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
14<br>
15<br>
16<br>
17<br>
18<br>
19<br>
20<br>
21<br>
22<br>
23<br>
24<br>
25<br>
27<br>

</div>

<div id="footer"></div>



    <link rel="stylesheet" href="main_css.css">
    <script src="main_script.js"></script>
  </body>
  </html>

CSS код:

html {padding: 0; margin: 0; width: 100%; height: 100%; }
body {background-color: white; width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 100vh;
font-family: 'SF Pro Display','SF Pro Icons','AOS Icons','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: normal; font-style: normal; margin: 0}

#header {position: absolute; width: 100%; height: 6%; background-color: black;  flex: 0 0 auto;}

#buttonMenu {position: absolute; color: white; margin: 7px 90% 0px 17px; font-size: 20px; font-weight: 900}

#logo {position: absolute; margin: 0.5% 49% 90% 49%; width: 25px; height: 25px}

#korzina {position: absolute; margin: 1% 1% 90% 90%; color: white}



#content {position: absolute; flex: 1 0 auto}

#footer {position: absolute; bottom: 0; background-color: lightgrey; width: 100%; height: 30%; flex: 0 0 auto;}

Кусочек CSS кода меню:

.menu {
  list-style: none;
  margin: 0;
  width:100%; height: 100%;
  background-color: black;
  position: absolute;
}

#submenu {
  position: relative;
  list-style: none;
  top: -1000%;
  flex-direction: row;
  display: flex;
  width: 100%;
  height: 100%;
justify-content: space-around;
  text-align: center;
  background-color: #616161;
z-index: 99;
 -moz-transition: all 400ms;
 -webkit-transition: all 400ms;
 transition: all 400ms;
}

#submenu.active {
  top: 100%;
}

Если нужно могу дать весь css код меню, просто это врятли поможет

Answer 1

У элемента .korzina внутри хедера есть большой нижний маргин, он и делает отступ вниз, потому что корзина позиционирована абсолютно.

Answer 2

Проблема заключалась в нижних маргинах у блоков buttonMenu, logo и korzina

Answer 3

Проверьте высоту своих элементов на странице. У меня подобная проблема была из-за изображений на бэкграунде. Они у меня были через тэг img и, как потом оказалось, растягивались в высоту слишком сильно. Сделала этим элементам max-height: 100%; и проблема пропала.

БЛОГ НА HUSL

Пустое пространство в конце сайта

Ответы (3 шт):