Crkva Kovacica Crkva Kovacica - 4 months ago 10
CSS Question

Make page to scroll horizontally instead of vertically

I made these three sections, and I want them each to be stretched through the whole screen, I managed to do that with

width
, but I don't know how to set the
height
to be 100% of the screen, and the main thing I want them to scroll horizontally, not vertically as usual. Can my code be fixed?

Take a look at the snippet bellow:



body {
margin: 0;
padding: 0;
}
.element {
width: 100%;
background-color: #333;
height: 100px;
margin: 0;
padding: 0;
}
.element2 {
width: 100%;
background-color: #000;
height: 100px;
margin: 0;
padding: 0;
}
.element3 {
width: 100%;
background-color: #111;
height: 100px;
margin: 0;
padding: 0;
}
.element p {
padding: 0;
font-family: "Bebas Neue";
font-size: 50px;
color: #ffffff;
position: absolute;
}
.element2 p {
padding: 0;
font-family: "Bebas Neue";
font-size: 50px;
color: #ffffff;
position: absolute;
}
.element3 p {
padding: 0;
font-family: "Bebas Neue";
font-size: 50px;
color: yellow;
position: absolute;
}

<div class="element">
<p>Element #1</p>
</div>

<div class="element2">
<p>Element #2</p>
</div>

<div class="element3">
<p>Element #3</p>
</div>




Answer

Try using flexbox, and set both html and body to height: 100%;

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
}
.element {
  flex: 0 0 100%;
}
.element1 { background: pink; }
.element2 { background: lightgreen; }
.element3 { background: lightblue; }
<div class="element element1">Element #1</div>
<div class="element element2">Element #2</div>
<div class="element element3">Element #3</div>