HTML & CSS: почему приходится уменьшать картинку на 20 пикселей, чтобы не было скроллбаров?

Question

Уважаемые знатоки,

я бился пару часов, перебирая ВСЕ свойства body, page и т.п., но я не могу понять.

Я программно генерирую картинку, точно соответствующую размеру экрана.

И показываю её в браузере, открытом на весь экран (грубо говоря, нажатием F11).

Но! пока я искусственно! при генерации картинки не уменьшу её на 20 пикселей (и по ширине, и по высоте) - она показывается со скроллбарами по обеим сторонам страницы (справа и снизу).

Я подозреваю, что я у какого то контейнера не прописал в явном виде чего то типа "margn: 0; padding: 0".

Вот html:

    <!DOCTYPE html>
    <html lang="ru">
    <head>
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body scroll="no" style="body-style">

    <!-- The video -->
    <video autoplay muted loop id="myVideo">
      <source src="Videos/Sparks-smallsize.mp4" type="video/mp4">
    </video>

    <div class="pngcontainer">
        <img src="images/image1.png">
    </div>

    <div class="logo-bottom">
      <img src="images/logo-small.png">
    </div>

    </body>

Вот CSS:

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.body-style {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 0;
    padding: 0;
}

.logo-bottom {
  position: fixed;
  bottom: 0;
  width: 215px;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  padding: 15px;
}

.pngcontainer {
  position: relative;
  z-index: 101;
  top:0;
  left:0;
    margin: 0;
    border: 0;
    padding: 0;
}

Вот как это выглядит на экране - видите скроллбары:

Вот ссылка на папку в репозитории. Там лежит картинка размером 2541 x 1421, если её сделать размерами 2540 x 1420 - скроллбары пропадут. При этом размер экрана - 2560 x 1440.

Небольшая коррекция: я сделал страницу, которую можно просто открыть в браузере и посмотреть на неё, только рассчитана она на моё разрешение монтитора, учитывайте это, пожалуйста.

Спасибо за подсказки!

Answer 1

Наверное как-то так:

По вопросу видно, что автор вопроса полагал, что написав класс body-style он им перекроет все свойства тега body, но это не так.

//Вклад в будущее
*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.body-style {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 0;
  padding: 0;
}

.logo-bottom {
  position: fixed;
  bottom: 0;
  width: 215px;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  padding: 15px;
}

.pngcontainer {
  position: relative;
  z-index: 101;
  top: 0;
  left: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body scroll="no" style="body-style">

  <!-- The video -->
  <video autoplay muted loop id="myVideo">
      <source src="Videos/Sparks-smallsize.mp4" type="video/mp4">
    </video>

  <div class="pngcontainer">
    <img src="images/image1.png">
  </div>

  <div class="logo-bottom">
    <img src="images/logo-small.png">
  </div>

</body>

БЛОГ НА HUSL

HTML & CSS: почему приходится уменьшать картинку на 20 пикселей, чтобы не было скроллбаров?

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