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?
TL;DR
- Avoid fixed positioning; use relative, absolute, or static instead.
- Place the div at the bottom of your content structure and use top margin or padding to push it down.
- Use Flexbox or Grid on the parent container to align the div at the bottom.
- Ensure the page is tall enough by adding content or setting min-height on sections.
- Alternatively, use absolute positioning within a relative wrapper to anchor the div at the page’s bottom.
To position a div relative to the bottom of the page rather than the bottom of the screen in Webflow, it's important to let the element flow with the document rather than using fixed positioning.
1. Avoid Fixed Positioning
- Check if the div is set to "Fixed" under the Position settings in the Style panel.
- If it is, change it to "Relative", "Absolute", or "Static" depending on your layout needs.
- Fixed positions elements relative to the viewport (screen), not the page, which is not what you want.
2. Use Margin or Padding to Push Down
- Place the div at the bottom of your main content structure, such as directly inside the Body or a Section at the end.
- Use top margin or top padding to push the div downward until it reaches near the bottom of the page.
- Try using responsive units (like vh or %) or Webflow spacing utilities to handle different screen sizes.
3. Consider Using Flexbox or Grid
- If your parent container (like the Body or a top-level Section) can be set to Flexbox (Vertical), you can align the bottom element using:
- Justify: Space Between (to push the last child to the bottom),
- Or Justify: End (if only one or two elements exist).
- For Grid, place the div in the last row of a grid layout.
4. Ensure Body Height Reflects Page Height
- If your page has little content, Webflow may treat the page height as only one screen tall.
- Add enough actual or dummy content (or set a min-height: 100vh on key sections) so the total page height becomes taller than the screen.
5. Use Absolute Position Within a Relative Container
- As an alternative, wrap your bottom div inside a parent div with position: Relative, and set your target div to position: Absolute with bottom: 0.
- This makes the div align to the bottom of the page content, assuming the wrapper spans the entire page.
Summary
To position a div relative to the bottom of the page rather than the screen, avoid fixed positioning, place the div near the bottom of your content, and use margin, flex, or absolute positioning within a relative wrapper. Make sure your page has enough height so "page bottom" is clearly defined.