Hello~
I have set up my homepage with body height 100% and section height 100% for full section scroll page.
It works fine.
But When I preview and test it with different browser height, each elements overlapped and overflow to next section.
I think it is because of Section height=100%. so I changed to height=auto, it works fine but section is not taking up full screen.
How can I solve this problem?
What am I missing?
You’re missing the occasion to give us the public sharing link for your site so we can help you 
Can you please do that?What you want should work with body and section to 100% so there must be something else.
Oops I forgot.
here we go
It would be better if you share it this way:
So that we’re able to see where a rogue setting might be producing the issue you’re facing.
1 Like
I see your sections being 100% height without overlapping each others… could you be more precise, maybe with a screenshot?
That’s the downside of 100 height sections, when the height isn’t that high… especially on laptops. So you have to determine the value your content needs to be fully displayed, and set this value as a min-height for each section.
You can also use VH as a unit instead of % or pixels for some of your content. VH means percentage of the viewport, so when you whrink your browser, your content resizes accordingly.
Thanks for the answer vincent!
How do I set content’s height value in VH?
There is only %, PX, Auto in webflow editor
And what about the javascript solution by adding custom code section?
I used to use this code before I use webflow.
$(“.section”).height($(window).height());
$(window).resize(function(){
$(".section").height($(window).height());
});
What do you think?
You type in VH then enter. You can do it for % and px too.
I know almost nothing in JS and gladly use VH when I can
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.