БЛОГ НА HUSL


Лишнее пространство под footer-ом

Автор вопроса: newbie seeker

Есть код

.bodyclass {
    display: grid;
    grid-template-areas: "header" "centerpart" "footer";
    grid-template-rows: 100px 1fr 743px;
    height: 100vh;
    margin: 0;
}

#pageHeader {
    grid-area: header;
    width: 100%;
    /*
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
}

.contentpart {
    display: grid;
    grid-template-areas: "leftsidemenu centercolumn rightsidemenu";
    grid-template-columns: 300px 1fr 245.8px;
    /*height: 100vh;*/
    margin: 0;
    grid-area: centerpart;
}

.leftmenu {
    grid-area: leftsidemenu;
}

.centerarea {
    grid-area: centercolumn;
    background-color: rgb(255, 255, 255);
}

.rightmenu {
    grid-area: rightsidemenu;
}

#dropdownwindow {
    display: none;
    left: 0;
    margin-right: 100%;
    height: 100vh;
}
    
#fullblock {
    height: 100vh;
}
    
#pageFooter {
    grid-area: footer;
    width: 100%;
}
<div id="fullblock">
<div id="dropdownwindow">
</div>
<header id="pageHeader">
<div class="headerinsides">
        <span class="flexcitylinkwrapper">
        <a href="#" class="flexcitylink">
                <span class="icon">
                        <svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
                </span>
                <span class="labelforicon">
                 Краснодар
                </span>
        </a>
        </span>
                <span class="intermediatespace">
                </span>
                <span class="telephonenumber">
                8 (800) 600 3900 (круглосуточно)
                </span>
                <span class="addressandworkschedule">
                    Адрес и график работы
                </span>
                <span class="payment">
                    Оплата
                </span>
                <span class="delivery">
                    Доставка
                </span>     
</div>
<div class="headerinsidessecondrow">
<button class="catalogbutton">Каталог товаров</button>

<span class="betweenspace">
</span>

<span class="findinfo">
        <input placeholder="Поиск среди 10000 товаров" class="inputsearch"></input>
        <button class="searchbutton">Найти</button>
</span>

<span class="secondbetweenspace">
</span>

<span class="loginandsignup">
    <span class="loginsignupimg">
        <img src="../images/header_profile-icon.png">
    </span>
    <span class="loginsignuptext">
        Вход и регистрация
    </span>
</span>

<span class="basket">
    <span class="loginsignupimg">
        <img src="../images/header_cart-icon.png">
    </span>
    <span class="loginsignuptext">
        Корзина
    </span>
</span>
</div>


</header>

<div class="contentpart">
    <div class="leftmenu">
    <nav class="menu">
    <ul id="sidemenu" class="level1">
      <li>
        <div class="leftside">
        <i class="fa fa-home"></i>
        </div>
        <div class="centerplace">
        <a href="" class="nestedblock">Техника для кухни</a>
        </div>
        <div class="rightside">
        <i class="fa fa-home"></i>
        </div>
            <ul class="level2">
                <li class="submenu">
                  <ul>
                    <li class="submenu__title">
                      <a href="#">Крупная бытовая техника</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Холодильники</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные камеры</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные лари</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Плиты газовые </a>
                    </li>
                  </ul>

                  <ul>
                    <li class="submenu__title">
                      <a href="#">New title</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Холодильники</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные камеры</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные лари</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Плиты газовые </a>
                    </li>
                  </ul>
                </li>
              </ul>
      </li>
      <li>
        <div class="leftside">
        <i class="fa fa-home"></i>
        </div>
        <div class="centerplace">
        <a href="" class="nestedblock">Бытовая техника для дома</a>
        </div>
        <div class="rightside">
        <i class="fa fa-home"></i>
        </div>
      </li>
      <li>
        <div class="leftside">
        <i class="fa fa-home"></i>
        </div>
        <div class="centerplace">
        <a href="" class="nestedblock">Ноутбуки и компьютеры</a>
        </div>
        <div class="rightside">
        <i class="fa fa-home"></i>
        </div>
            <ul class="level2">
                 <li class="submenu">
                
                  <ul>
                    <ul class="innerUL">
                        <li class="submenu__title">
                          <a href="#">Ноутбуки</a>
                        </li>
                    </ul>
                    <ul class="innerUL">
                        <li class="submenu__title">
                          <a href="#">Ноутбуки-трансформеры</a>
                        </li>       
                    </ul>                   
                    <ul class="innerUL">
                        <li class="submenu__title">
                          <a href="#">Ультрабуки</a>
                        </li>           
                    </ul>
                    <ul class="innerUL">
                        <li class="submenu__title">
                            <a href="#">Моноблоки</a>
                        </li>
                        <li class="submenu__item">
                            <a href="#">Моноблоки с Windows</a>
                        </li>
                        <li class="submenu__item">
                            <a href="#">Apple iMac</a>
                        </li>
                    </ul>                   
                    <li class="submenu__item">
                      <a href="#">Холодильники</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные камеры</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные лари</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Плиты газовые </a>
                    </li>
                  </ul>

                  <ul>
                    <ul class="innerUL">                    
                    <li class="submenu__title">
                      <a href="#">New title</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Холодильники</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные камеры</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные лари</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Плиты газовые </a>
                    </li>
                    </ul>
                  </ul>
                </li>

                            
      </ul>
      </li>
      <li>
        <div class="leftside">
        <i class="fa fa-home"></i>
        </div>
        <div class="centerplace">
        <a href="" class="nestedblock">Комплектующие</a>
        </div>
        <div class="rightside">
        <i class="fa fa-home"></i>
        </div>    
      </li>
      <!--</li>-->
    </ul>
    </nav>
    </div>

    <div class="centerarea">
    </div>

    <div class="rightmenu">
    </div>
    </div>

                        
<footer id="pageFooter">
    <div class="b-footer__container">
    <div class="b-footer-menu">
      <div class="b-footer-menu__column">
        <div class="b-footer-menu__col" data-footer-col="">
          <div class="b-footer-menu__header" data-accordion-btn="0">
            <a href="https://www.svyaznoy.ru/store/about-us">
              Интернет-магазин
            </a>
            <i class="icon-angle-down-white b-footer-menu__header-icon is-mobile-only"></i>
          </div>
          <ul class="b-footer-menu__list" data-accordion-target="0" style="display: none;">
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/about-us" class="b-footer-menu__link">О нас</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/delivery" class="b-footer-menu__link">Доставка</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/pay" class="b-footer-menu__link">Оплата</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/kredit" class="b-footer-menu__link">Покупка в кредит</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/e-catalog" class="b-footer-menu__link">Электронный каталог</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/special-offers" class="b-footer-menu__link">Акции</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/news" class="b-footer-menu__link">Новости</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/reviews" class="b-footer-menu__link">Обзоры</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/personal" class="b-footer-menu__link">Условия продажи<br> и политика обработки<br> персональных данных</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/services/card2card" class="b-footer-menu__link">Денежные переводы<br> с карты на карту</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/services/creditpayment" class="b-footer-menu__link">Оплата кредита онлайн</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/services/moneytransfer" class="b-footer-menu__link">Денежные переводы онлайн</a></li>
          </ul>
        </div>
      </div>
      <div class="b-footer-menu__column">
        <div class="b-footer-menu__col" data-footer-col="">
          <div class="b-footer-menu__header" data-accordion-btn="1">
            <a href="https://www.svyaznoy.ru/store/company">
              Компания
            </a>
            <i class="icon-angle-down-white b-footer-menu__header-icon is-mobile-only"></i>
          </div>
          <ul class="b-footer-menu__list" data-accordion-target="1" style="display: none;">
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/history" class="b-footer-menu__link">Кто мы</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/catalog/elektronika-optom" class="b-footer-menu__link">Корпоративным клиентам</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/owner_of_real" class="b-footer-menu__link">Арендодателям</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/charity" class="b-footer-menu__link">Благотворительность</a></li>
            <li class="b-footer-menu__line"><a href="https://job.svyaznoy.ru/" target="_blank" class="b-footer-menu__link">Работа в «Связном»</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/contacts" class="b-footer-menu__link">Контакты</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/anticorruption" class="b-footer-menu__link">Политика по&nbsp;противодействию<br>коррупции</a></li>
          </ul>
        </div>
      </div>
      <div class="b-footer-menu__column">
        <div class="b-footer-menu__col" data-footer-col="">
          <div class="b-footer-menu__header" data-accordion-btn="2">
            <a href="https://www.svyaznoy.ru/store/help">
              Помощь покупателю
            </a>
            <i class="icon-angle-down-white b-footer-menu__header-icon is-mobile-only"></i>
          </div>
          <ul class="b-footer-menu__list" data-accordion-target="2" style="display: none;">
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/support/feedback/add-review" class="b-footer-menu__link">Обратная связь</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/shops" class="b-footer-menu__link">Адреса магазинов</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/obmen_vozvrat_remont" class="b-footer-menu__link">Обмен, возврат и ремонт</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/guarantee" class="b-footer-menu__link">Гарантия</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/support/repair-status" target="_blank" class="b-footer-menu__link">Статус ремонта</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/support/contacts/addresses" target="_blank" class="b-footer-menu__link">Адреса сервисных центров</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/service" class="b-footer-menu__link">Дополнительные услуги и сервис</a></li>
          </ul>
        </div>
        <div class="b-footer-menu__col" data-footer-col="">
          <div class="b-footer-menu__header" data-accordion-btn="3">
            <a href="https://www.svyaznoy.ru/store/press_center">
              Пресс-центр
            </a>
            <i class="icon-angle-down-white b-footer-menu__header-icon is-mobile-only"></i>
          </div>
          <ul class="b-footer-menu__list" data-accordion-target="3" style="display: none;">
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/history" class="b-footer-menu__link">История</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/mission" class="b-footer-menu__link">Миссия и ценности</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/news/press" class="b-footer-menu__link">Пресс-релизы</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/media_about_us" class="b-footer-menu__link">СМИ о нас</a></li>
            <li class="b-footer-menu__line"><a href="https://drive.google.com/open?id=1UhyjwJ6wZbUX-UxlFVTELnYi8bnxuhmg" target="_blank" class="b-footer-menu__link">Фотографии</a></li>
            <li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/contacts_for_media" class="b-footer-menu__link">Контакты для прессы</a></li>
          </ul>
        </div>
      </div>
      <div class="b-footer-menu__column">
        <div class="b-footer-menu__col is-mobile-not">
          <div class="b-footer-menu__contacts">
            <div class="b-footer-menu__header _xl">
                <a href="tel:84952870000">8 (495) 287-00-00</a>
            </div>
            Интернет-магазин
            <div class="b-footer-menu__header _xl">
                <a href="tel:88007005000">8 (800) 700-50-00</a>
            </div>
            Связной Поддержка
            <div class="b-footer-menu__header _xl">
                <a href="tel:88007009922">8 (800) 700-99-22</a>
            </div>
            Корпоративным клиентам
          </div>
          <div class="b-footer-menu__socials">
            <a href="https://www.facebook.com/svyaznoy.ru" target="_blank">
              <i class="icon-fb"></i>
            </a>
            <a href="https://vk.com/svyaznoy" target="_blank">
              <i class="icon-vk"></i>
            </a>
            <a href="https://twitter.com/svyaznoy_ru" target="_blank">
              <i class="icon-twitter"></i>
            </a>
            <a href="https://www.instagram.com/svyaznoy_russia/?hl=ru" target="_blank">
              <i class="icon-instagram"></i>
            </a>
          </div>
          <div class="b-footer-menu__ga">
            <a href="https://play.google.com/store/apps/details?id=ru.svyaznoy.shop" target="_blank" class="_gp" data-app-logo-event="" data-gtm-params="{&quot;eventContextGTM&quot;:&quot;https:\/\/play.google.com\/store\/apps\/details?id=ru.svyaznoy.shop&quot;,&quot;eventLocationGTM&quot;:&quot;\u0424\u0443\u0442\u0435\u0440&quot;}"></a><br>
            <a href="https://apps.apple.com/ru/app/svaznoj-internet-magazin-elektroniki/id1062774471" target="_blank" class="_as" data-app-logo-event="" data-gtm-params="{&quot;eventContextGTM&quot;:&quot;https:\/\/apps.apple.com\/ru\/app\/svaznoj-internet-magazin-elektroniki\/id1062774471&quot;,&quot;eventLocationGTM&quot;:&quot;\u0424\u0443\u0442\u0435\u0440&quot;}"></a>
            <br>
            <a href="https://appgallery.cloud.huawei.com/marketshare/app/C102123139?locale=ru_RU&amp;source=appshare&amp;subsource=C102123139" target="_blank" class="_ag" data-app-logo-event="" data-gtm-params="{&quot;eventContextGTM&quot;:&quot;https:\/\/appgallery.cloud.huawei.com\/marketshare\/app\/C102123139?locale=ru_RU&amp;source=appshare&amp;subsource=C102123139&quot;,&quot;eventLocationGTM&quot;:&quot;\u0424\u0443\u0442\u0435\u0440&quot;}"></a>
          </div>
        </div>
      </div>
    </div>
    <div class="b-footer-border"><div class="b-footer-border__inner"></div></div>
    <div class="b-footer-rel" data-footer-col="">
      <div class="b-footer-menu__header is-mobile-only" data-accordion-btn="4">
        Другие проекты
        <i class="icon-angle-down-white b-footer-menu__header-icon is-mobile-only"></i>
      </div>
      <div class="b-footer-rel__list" data-accordion-target="4" style="display: none;">
      </div>
    </div>
    <div class="b-footer-bottom">
      <div class="b-footer-copy-wrapper">
        <div class="b-footer-copy">© ООО «Сеть Связной» 2002—2021. Все права защищены. Указанная в интернет-магазине цена товаров и условия их приобретения действительны на текущую дату.</div>
      </div>
      <a class="b-footer-stop-covid _big lazy lazy-loaded" href="https://ecomvscovid.ru/" target="_blank" style="background-image: url(&quot;https://cdn.svyaznoy.ru/upload/web/svyaznoy/img/footer/covidlogo.svg&quot;);">
        Зона безопасного сервиса. Стоп COVID.
      </a>
    </div>
        <div class="b-footer-contacts-mobile">
      <div class="b-footer-contacts-mobile__row">
        <div class="b-footer-menu__socials">
          <a href="https://www.facebook.com/svyaznoy.ru" target="_blank">
            <i class="icon-fb"></i>
          </a>
          <a href="https://vk.com/svyaznoy" target="_blank">
            <i class="icon-vk"></i>
          </a>
          <a href="https://twitter.com/svyaznoy_ru" target="_blank">
            <i class="icon-twitter"></i>
          </a>
          <a href="https://www.instagram.com/svyaznoy_russia/?hl=ru" target="_blank">
            <i class="icon-instagram"></i>
          </a>
        </div>
        <div class="b-footer-contacts-mobile__right-col">
                    <a class="b-footer-stop-covid _small lazy" data-original="https://cdn.svyaznoy.ru/upload/web/svyaznoy/img/footer/covidlogo.svg" href="https://ecomvscovid.ru/" target="_blank">
            Зона безопасного сервиса. Стоп COVID.
          </a>
          <div class="b-footer-contacts-mobile__tel">
            <a class="b-footer-contacts-mobile__tel-link" href="tel:8 (495) 287-00-00">8 (495) 287-00-00</a>
            <div class="b-footer-contacts-mobile__tel-descr">Интернет магазин</div>
          </div>
        </div>
      </div>
      <div class="b-footer-menu__ga _mobile">
        <a href="https://play.google.com/store/apps/details?id=ru.svyaznoy.shop" target="_blank" class="_gp" data-app-logo-event="" data-gtm-params="{&quot;eventContextGTM&quot;:&quot;https:\/\/play.google.com\/store\/apps\/details?id=ru.svyaznoy.shop&quot;,&quot;eventLocationGTM&quot;:&quot;\u0424\u0443\u0442\u0435\u0440&quot;}"></a>
        <a href="https://apps.apple.com/ru/app/svaznoj-internet-magazin-elektroniki/id1062774471" target="_blank" class="_as" data-app-logo-event="" data-gtm-params="{&quot;eventContextGTM&quot;:&quot;https:\/\/apps.apple.com\/ru\/app\/svaznoj-internet-magazin-elektroniki\/id1062774471&quot;,&quot;eventLocationGTM&quot;:&quot;\u0424\u0443\u0442\u0435\u0440&quot;}"></a>
        <a href="https://appgallery.cloud.huawei.com/marketshare/app/C102123139?locale=ru_RU&amp;source=appshare&amp;subsource=C102123139" target="_blank" class="_ag" data-app-logo-event="" data-gtm-params="{&quot;eventContextGTM&quot;:&quot;https:\/\/appgallery.cloud.huawei.com\/marketshare\/app\/C102123139?locale=ru_RU&amp;source=appshare&amp;subsource=C102123139&quot;,&quot;eventLocationGTM&quot;:&quot;\u0424\u0443\u0442\u0435\u0440&quot;}"></a>
      </div>
    </div>
  </div>

</footer>

</div>

Все рабочее пространство находится в блоке .bodyclass, который состоит их следующих блоков header - #pageHeader, centerpart - .contentpart, footer - #pageFooter. Их высоты задаются -

grid-template-rows: 100px 1fr 743px;

Привожу скриншоты для наглядности

underfooter

введите сюда описание изображения

middlepart

И привожу скриншот пространства под футером

underfooterblock

Как избавиться от пространства под футером?


Источник

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

Автор решения: TashaK

В вашем html коде ошибка: тег input не имеет закрывающего тега.

Вот фрагмент вашего кода:

<span class="findinfo">
    <input placeholder="Поиск среди 10000 товаров" class="inputsearch"></input>
    <button class="searchbutton">Найти</button>
</span>

Замените ваш input:

<input placeholder="Поиск среди 10000 товаров" class="inputsearch">
→ Ссылка
Автор решения: newbie seeker

Проблема была в том, что подменю пункта меню Техника для кухни имело height: 1010px, поэтому оно вылезало за границы футера (поэтому образовалось свободное пространство под футером) - высоту надо было задавать в %.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.