Контент заезжает под header и footer

Question

Через flexbox хотел прижать footer к низу сайта и сделать так, чтобы он cмещался вниз при увеличении количества контента, однако столкнулся с тем, что контент заезжает под header и footer.

Как сделать так, чтобы контент не заезжал под другие блоки, а сам футер при увеличении количества контента смещался вниз? Пробовал менять позиционирование у контента и других блоков. Если у footer убрать bottom: 0, то он встанет в начало страницы

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

<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>
</body>

Answer 1

По идее ты можешь блоку с контентом задать

min-height: **px;

таким образом блок с контентом будет растягиваться и не будет заезжать под блоки, таким образом и не придётся футер в низ прилеплять, т.к он следует за блоком с контентом. Да и наверное правильно будет создавать секции, создаёшь header, создаешь контент, создаёшь footer, и если тебе нужен растяжимый блок, если туда будет добавляться контент, блок сам растянется с соблюдением пэдингов и марджинов, тогда и не надо флексом весь контент строить.

Answer 2

Если выставите фиксированую высоту для header и footer, то то вы можете высчитать минимальную высоту content'а.

Примерно вот так:

body {
  margin: 0;
}

.header {
  background: #000;
  height: 40px;
  color: #fff;
}

.footer {
  background: #999;
  height: 100px;
}

.content {
  min-height: calc(100vh - (40px + 100px));
/* Высота экрана - (высота header + высота footer) */
}

<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>

БЛОГ НА HUSL

Контент заезжает под header и footer

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