How to do horizontal scroll with screen size Divs

Question

I have 4 div's who would like to put a scroll horizontal to navigate them but the div's are the size of the screen (and I want you to have the full size of the screen). I managed to do an example but like the div's occupy the full screen size do not press do scroll, the scroll stays disabled

Here is the example I made.

Answer 1

If I understand what you want, it’s what’s in that example I did: Here

I only modified your CSS:

.wrapper_child > .tab {
    width: 25%;
    height: 100%;
    text-align: center;
    display: inline-block;
    margin-right: -4px;
}

You had noticed that the wrapper "father" has 400% of the screen size. Logo 100% of its content represents 400% of the screen. Your children then that are 4 need to be 25% of your space. To make it possible to stay side by side I even put the CSS property display: inline-block; to carry out this work. I also placed the property margin-right: -4px; to adjust a space that had been between the divs.

Answer 2

You got very close. Remember that the sizes with % are relative to the parent of the element. In your example, the class wrapper_child is 400%, so far so good, but the definition of the daughter class tab, .wrapper_child > .tab, indicates that each div will have the size of 100%, ie the same size as the parent, which is with 400% of the screen.

To solve, it’s basically split: 100% / 4 = 25%

This already settles the size. Just need to hit now leave the divs side by side, instead of one on top of the other (you can’t see because there is no vertical scroll), and this you can add in tab the float: left;.

Look how it looks. I just changed the colors to be softer:

.wrapper {
  height: 100vh;
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
}

.wrapper_child{
  width: 400%;
  height: inherit;
}

.wrapper_child > .tab {
  float:left;
  width: 25%;
  height: 100%;
  text-align: center;
}

#home {
  background-color: rgba(255, 255, 0, 0.2);/*yellow;*/
}

#gallery {
  background-color: rgba(0, 255, 0, 0.2);/*green;*/
}

#about {
  background-color: rgba(0, 0, 255, 0.2);/*blue;*/
}

#contacts {
  background-color: rgba(255, 0, 0, 0.2);/*red;*/
}

<div class="wrapper">
  <div class="wrapper_child">
    <div id="home" class="tab">
      <h3 class="text-center align-middle">Home</h3>
    </div>

    <div id="gallery" class="tab">
      <h3 class="text-center align-middle">Gallery</h3>
    </div>

    <div id="about" class="tab">
      <h3 class="text-center align-middle">About us</h3>
    </div>

    <div id="contacts" class="tab">
      <h3 class="text-center align-middle">Contacts</h3>
    </div>
  </div>
</div>

Answer 3

In the example you have, the div with the class wrapper_child is 400% width, that is, 4 times larger than the screen, that is why it puts scroll. If you intend to have the same effect, you have to add a width over 100%.