<h1>Viewport Units and Percentage</h1>
<div class="percent-parent">
<div class="percent-child"></div>
</div>
<div class="viewport-parent">
<div class="viewport-child"></div>
</div>
* {
box-sizing: border-box;
}
body {
text-align: center;
font-family: 'Lato';
}
.percent-parent {
width: 50%;
height: 300px;
background: orange;
padding-top: 75px;
margin-bottom: 75px;
}
.percent-child {
width: 80%;
height: 150px;
background: rgba(125, 255, 0, 0.5);
}
.viewport-parent {
width: 50%;
height: 300px;
background: orange;
padding-top: 75px;
margin-bottom: 75px;
}
.viewport-child {
width: 80vw;
height: 150px;
background: rgba(125, 0, 255, 0.5);
}
This Pen doesn't use any external JavaScript resources.