Отзывчивый CSS Горизонтальная прокрутка

Question

Я пытаюсь добавить горизонтальную прокрутку на страницу, чтобы при вертикальной прокрутке страница прокручивалась горизонтально. Я нашел фрагмент кода, который может это сделать, который полностью основан на CSS, однако он не кажется адаптивным. Я нашел это на CodePen.

Есть ли способ, которым этот код может быть преобразован в реагирующую страницу?

Я прикрепил код ниже.

#container {
  margin-top: -15px;
}

#container .box {
  width: 100vw;
  height: 100vh;
  display: inline-block;
  position: relative;
}

#container .box>div {
  width: 100%;
  height: 100%;
  font-size: 96px;
  color: #FFF;
  position: absolute;
  top: 5%;
  left: 2.6%;
  margin: -50px 0 0 -50px;
  line-height: .7;
  font-weight: bold;
}

#container {
  overflow-y: scroll;
  overflow-x: hidden;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  background-color: #999;
  position: absolute;
  width: 100vh;
  height: 100vw;
}

#container2 {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  white-space: nowrap;
  font-size: 0;
}

.one {
  background-color: #45CCFF;
}

.two {
  background-color: #49E83E;
}

.three {
  background-color: #EDDE05;
}

.four {
  background-color: #E84B30;
}

<div id="container">
  <div id="container2">

    <div class="box one">
      <div class="full">
        <img class="desktop" src="public/images/lookbook/4.jpg" alt="Header" />
      </div>
    </div>


    <div class="box two">
      <div>2</div>
    </div>


    <div class="box three">
      <div>3</div>
    </div>


    <div class="box four">
      <div>Last</div>
    </div>


  </div>
</div>

Если у кого-нибудь есть идеи - пожалуйста, дайте мне знать!

Answer 1

Вот код, который вы хотите, используйте изображение вместо фона.Это позволяет ему полностью покрывать div, как вы хотите.В то же время быть отзывчивым.

body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
}

#container .box {
  width: 100vw;
  height: 100vh;
  display: inline-block;
  position: relative;
  background-size: cover;
}

#container .box>div {
  width: 100%;
  height: 100%;
  font-size: 96px;
  color: #FFF;
  position: absolute;
  top: 5%;
  margin: 20px 0px 0px;
  line-height: .7;
  font-weight: bold;
}

#container {
  overflow-y: scroll;
  overflow-x: hidden;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  background-color: #999;
  position: absolute;
  width: 100vh;
  height: 100vw;
}

#container2 {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  white-space: nowrap;
  font-size: 0;
}

.one {
  background-color: #45CCFF;
  background-image: url(https://images.pexels.com/photos/1022454/pexels-photo-1022454.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);

}

.two {
  background-color: #49E83E;
  background-image: url(https://images.pexels.com/photos/1023949/pexels-photo-1023949.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}

.three {
  background-color: #EDDE05;
  background-image: url(https://images.pexels.com/photos/963071/pexels-photo-963071.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}

.four {
  background-color: #E84B30;
  background-image: url(https://images.pexels.com/photos/1022928/pexels-photo-1022928.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}

<div id="container">
  <div id="container2">
    <div class="box one">
      <div class="full">
        <div>1</div>
      </div>
    </div>
    <div class="box two">
      <div>2</div>
    </div>
    <div class="box three">
      <div>3</div>
    </div>
    <div class="box four">
      <div>Last</div>
    </div>
  </div>
</div>

Answer 2

Я взял на себя инициативу удалить все эти уродливые пробелы и полосы прокрутки, а также то, что вы просили: Codepen

body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
}

#container {
    width: calc(100vh + 17px);
    height: 100vw;
    margin-top: -17px;
    margin-right: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
    transform: rotate(270deg) translateX(-100%);
    transform-origin: top left;
    background-color: #999;
    position: absolute;
}

#container2 {
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    white-space: nowrap;
    font-size: 0;
}

 #container .box {
    width: 100vw;
    height: 100vh;
    display: inline-block;
    position: relative;
} 

 #container .box > div {
    font-size: 96px;
    color: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    line-height: 0.9;
    font-weight: bold;
}

.full {
    height: 100%;
    width: 100%;
    position: relative;
}

.desktop {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background-size: cover;
}

.one {background-color: #45CCFF;}
.two {background-color: #49E83E;}
.three {background-color: #EDDE05;}
.four {background-color: #E84B30;}