Overflow-x не работает с абсолютно позиционированными div - PullRequest
Новая
       3

Overflow-x не работает с абсолютно позиционированными div

0 голосов
/ 18 марта 2020

Итак, я создаю слайд-шоу и столкнулся с проблемой. У меня есть некоторые div, позиции которых являются абсолютными, и я даю им left: 100%;. Это хорошо работает на полном экране, но когда я изменяю размер экрана, абсолютная позиция ломается overflow-x: hidden;, присваиваемой тегам body и html. Как это исправить?

Вот код 

html,
body {
  margin: 0 auto;
  overflow-x: hidden;
}

.slides {
  width: 100%;
  height: 100vh;
  position: absolute;
}

.slide-img {
  width: 100%;
  height: 100%;
}

#slide-2 {
  left: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marseille</title>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="slides" id="slide-1">
    <img class="slide-img" src="media/slideshow/image-1.jpg">
  </div>
  <div class="slides" id="slide-2">
    <img class="slide-img" src="media/slideshow/image-2.jpg">
  </div>
  <div class="slides" id="slide-3">
    <img class="slide-img" src="media/slideshow/image-3.jpg">
  </div>
  <div class="slides" id="slide-4">
    <img class="slide-img" src="media/slideshow/image-4.jpg">
  </div>
</body>

</html>

1 Ответ

0 голосов
/ 18 марта 2020

Вы должны установить параметр left для всех четырех (или фактически трех) абсолютно позиционированных DIV, остальные мудрые DIV # 3 и 4 будут (которые все еще имеют left: 0) показываться внутри окно просмотра и обложка DIV # 1. В приведенном ниже фрагменте я установил левый параметр на 25/50/75% для DIVs 2-4, чтобы продемонстрировать, что он работает (вам нужно установить их как минимум на 100% или более, в зависимости от того, как вы вставляете их в область просмотра) . 

html, body {
  margin: 0 auto;
  overflow-x: hidden;
}

.slides {
  width: 100%;
  height: 100vh;
  position: absolute;
}

.slide-img {
  width: 100%;
  height: 100%;
}

#slide-2 {
  left: 25%;
}
#slide-3 {
  left: 50%;
}
#slide-4 {
  left: 75%;
}
  <div class="slides" id="slide-1">
    <img class="slide-img" src="http://placehold.it/800x500/fb8">
  </div>
  <div class="slides" id="slide-2">
    <img class="slide-img" src="http://placehold.it/700x500/bf8">
  </div>
  <div class="slides" id="slide-3">
    <img class="slide-img" src="http://placehold.it/900x500/8bf">
  </div>
  <div class="slides" id="slide-4">
    <img class="slide-img" src="http://placehold.it/600x500/f8b">
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...