You may have seen some awesome websites or themes that comes with a full-screen hero section. When you scroll down you would see the rest of the content below it. Even if you resize the window or check the site on a mobile device, this hero section will often remain as a full-screen element. This is a cool layout component and here we will see how to get this done.
Here we will see 2 different ways to get this output.
- jQuery based
- CSS only based
- vh = 1% of viewport height.
- vw = 1% of viewport width
- vmin = Smaller value among the both
- vmax = Larger value among the both.
This is widely supported on all modern browsers and partially supported on IE 9 and above. In this method we can simply assign the height value for our hero section as 100vh. That will be 100% of the viewport height. The width can be set as 100%. This will make the hero section full-screen. It will also be consistent even when you re-size the window. Please check the codepen below to see the code.