I made these three sections, and i want them each to be stretched through the whole screen, i managed to do that with
width
height
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>
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>