Crkva Kovacica Crkva Kovacica - 5 months ago 6
HTML Question

How can i make this page scroll horizontally instead of verticaly?

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 (sorry if its easy, i am noob), 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%;
  background: #333;
  color: white;
}
.element2 {
  background: #666;
}
<div class="element element1">
  <p>Element #1</p>
</div>
<div class="element element2">
  <p>Element #2</p>
</div>
<div class="element element3">
  <p>Element #3</p>
</div>