How can I ensure that the div in my Webflow website is positioned relative to the bottom of the page instead of the bottom of the screen?

When you want a div element to be positioned relative to the bottom of the page in Webflow, instead of the screen, you need to adjust its positioning settings. Here’s how to do it:

​

1. Set Height to 100% of Parent

• Select the parent container of your div element.
• Ensure that its height is set to 100% to make sure it stretches over the page's full height.

​

2. Use Relative Positioning

• Select the div element you want to position.
• In the Style panel, set the position to Relative. This makes it position itself relative to its parent container.

​

3. Adjust Bottom Margin

• With the div still selected, set the bottom margin to a specific value to create space between your div and the page's bottom. This helps dictate how close the div will appear to the bottom.

​

4. Check Page Content Height

• Verify that the overall content of your page exceeds the screen height. This ensures the div positions itself according to the page length instead of the viewport.

​

Summary

To position a div relative to the bottom of a Webflow page, ensure its parent spans the page height, set the div position to Relative, adjust its bottom margin, and confirm your page content is longer than the viewport. This will align the div relative to the bottom of the page.