Почему footer не прижимается к низу?

Question

    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
          href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap"
          rel="stylesheet"
        />
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/style.css" />
        <title>Relvise</title>
      </head>
      <body>
        <div class="wrapper">
          <header class="header">
            <div class="header__container _container">
              <a href="" class="header__logo">Relvise</a>
              <nav class="header__menu menu">
                <ul class="menu__list">
                  <li class="menu__item">
                    <a href="/" class="menu__link">Home</a>
                  </li>
                  <li class="menu__item">
                    <a href="/" class="menu__link">Product</a>
                  </li>
                  <li class="menu__item">
                    <a href="/" class="menu__link">Pricing</a>
                  </li>
                  <li class="menu__item">
                    <a href="/" class="menu__link">Contact</a>
                  </li>
                </ul>
              </nav>
            </div>
          </header>
          <main class="main"></main>
          <footer class="footer">Я подвал</footer>
        </div>
        <script src="js/script.js"></script>
      </body>
    </html>


  

      body {
          height: 100%;
          line-height: 1;
          font-family: Montserrat;
          color: #252b42;
          font-size: 14px;
          font-weight: 500;
        }
        
        .wrapper {
          min-height: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
        }
        
        ._container {
          max-width: 1046px;
          padding: 0 15px;
          margin: 0 auto; /* убираем прилепание */
          box-sizing: content-box; /* убираем прилепание */
        }
        
        /* Шапкка------------------------------------------------------------------------- */
        
        .header {
          position: absolute;
          width: 100%;
          left: 0;
          top: 0;
          z-index: 50;
        }
        .header__container {
          display: flex;
          min-height: 104px;
          align-items: center;
        }
        
        @media (max-width: 479px) {
          .header__container {
            min-height: 85px;
          }
        }
        
        .header__logo {
          text-decoration: none;
          font-size: 24px;
          font-weight: 700;
          color: inherit;
        }
        .header__menu {
          margin: 0px 0px 0px 133px;
        }
        
        /* уменьшаем отступ между menu и logo */
        @media (max-width: 992px) {
          .header__menu {
            margin: 0px 0px 0px 80px;
          }
        }
        @media (max-width: 767px) {
          .header__menu {
            margin: 0px 0px 0px 40px;
          }
        }
        @media (max-width: 479px) {
          .header__menu {
            margin: 0px 0px 0px 20px;
          }
        }
        
        @media (max-width: 479px) {
          .header__menu {
            font-size: 18px;
          }
        }
        
        .menu {
          padding: 5px 0; /* отступы безопасности */
        }
        .menu__list {
          flex-wrap: wrap;
          list-style-type: none;
          display: flex;
        }
        .menu__item {
          margin-right: 21px;
        }
        .menu__link {
          text-decoration: none;
          color: #737373;
          font-weight: 600;
          line-height: calc(24 / 14 * 100%);
        }
        
        /* --------Main--------------------------------------- */
        .main {
          flex: 1 1 auto;
        }
        
        /* --------Подвал--------------------------------------- */
        .footer {
        }

Answer 1

*{
   margin:0;
 }

 .wrapper {
   min-height: 100vh;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }

БЛОГ НА HUSL

Почему footer не прижимается к низу?

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