Archived topic
could you help to find full section height?
3 replies · Started by Jusung on September 4, 2022
I found that it can be complicated to find the full screen height.
What I found is that 100 - the header and footer size, but I can't understand it.
Can you help to find the full screen height on my case?
on the front page, once you scroll down, you can see 3 sections with different colors.
I wannt to make each section has full screen height.
Thank you!
Hi there,
if you want to adjust for the sticky header then:
1. Add this CSS to your site:
.gb-container.full-height-section {
min-height: calc( 100vh - 91px );
}
/* mobile screen */
@media(max-width: 768px) {
.gb-container.full-height-section {
min-height: calc( 100vh - 61px );
}
}2. Select the Container Block and in Advanced > Additional CSS class(ess) add: full-height-section
Thank you.
It works well!
Could I know how to caculate it by myself?
I might change the size of header or footer and I wanna caculate it on my own.
Hi Jusung,
To get the Header/Footer dimension, right click and inspect them. This will open the Console.
Then, go to the Elements tab in the console. Select the element you wish to get the dimensions of. Hovering on elements will highlight which element is which.
Then, if you're using Google Chrome, on the right-hand side, where Styles, Computed, Layout, Event Listeners are, select Computed. On a different browser, there should also be a computed tab.
This tab will show the element dimensions.
