Setting a section to full height can create a visually impactful design by utilizing the entire viewport height. This makes your content stand out and effectively engages visitors.
In this article, we will guide you through the process of setting a hero section with full height in Divi.
Set the Section's Height to full height using the Sizing options
Open the Section's settings by clicking on the Gear icon
Go to the Design Tab
Expand the Sizing Option Group
Set the 100vh value for the Min Height option
Set the Section's Height to full height using custom CSS (advanced)
Identify the height of the Header area
Open the Section's settings by clicking on the Gear icon
Go to Advanced Tab → Custom CSS → Free Form CSS
Add the following CSS code:
body.logged-in selector {
min-height: calc(100vh - 112px);
}
selector {
min-height: calc(100vh - 80px)
}
Note: In the above CSS code, from the 100vh value two different values are subtracted:
112px - which is the sum of the WordPress top admin bar (32px) and the default height of the Header area, which is 80px. You will need to find out which is the height of your header area, which can vary depending on which layout for the Header you are using
80px - is the default Height for the Divi's Header area. This can be different if you are using the Theme Builder and a custom Header layout