1

Проблема в том, что после основного содержимого сайта идет лишнее пустое пространство

Пробовал оборачивать все содержимое сайта в div и уже этому диву задавать ширину и высоту Пробовал обнулять margin и padding у body и html

Если смотреть через инспектор, то оно показывает что это html, но я убрал у тега html внешние и внутренние отступы Если смотреть через инспектор, то оно показывает что это html, но я убрал у тега html внешние и внутренние отступы

Однако если уменьшить размер страницы через инспектор, то это пустое пространство исчезнет если уменьшить размер страницы, то пустое пространство исчезнет

Вот HTML код:

<!DOCTYPE HTML>
<html>
<head>
  <title>Главная страница</title>
  </head>
  <body>
    <div id="site">
      <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>



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

Вот CSS код:

#site {width: 100%; height: 100%; margin: 0; padding: 0}

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

#header {position: absolute; width: 100%; height: 6%; background-color: black; z-index: 9999}

#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}
2
  • 1
    height: 100%, думаю, в этом проблема
    – VanilJS
    3 апр 2020 в 10:50
  • у body просто ставите вместо height: 100%; - height: 100vh; . Когда вы ставите 100% элементу, он растягивает на 100% от высоты родителя, либо исходя из суммарной высоты внутренних элементов. А вот 100vh означает, что он будет брать высоту исходя из высоты окна браузера, а значит всегда растягиваться на весь экран. 25 мар в 5:32

2 ответа 2

0

Попробуй добавить в css файла, лучше в самое начало:

body {
    min-height: 100vh;
    margin: 0px;
    padding: 0px;
}

Кстати, в твоём css файле у body стоит два знака ";;" после width: 100%.

0
0

Уберите height: 100%; у тегов html,body и #site.

1
  • Вопрос был про пустое пространство, проблема исправлена. В остальном, код ужасный и нормально работать не будет. Почитайте пару книг по HTML и CSS.
    – Neolot
    3 апр 2020 в 13:13

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.