Member Avatar for AndyTT75

Hello to all

Can anyone help me ?

I'd like to create a box whose bottom is always 20 px from the bottom of the "canvas" (=the total area rendered by the browser).

This is straightforward when the height of the canvas is less than the screen height

But tricky when the canvas is taller than the screen-height.

Is this possible with CSS ? If so, how ?

Thanks for help !

  • 2 Contributors
  • 3 Replies
  • 84 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by buddylee17

Dani AI

Generated

Two different targets are being conflated: the viewport (what you see on screen) and the document/canvas (the whole page). That changes the solution. suggested an absolutely positioned box and reported it failed. A common reason is that absolute offsets are computed against a containing block (usually the nearest ancestor whose position is not static), not necessarily the whole page — see MDN: Containing block.

Practical options:

  • If the intent is "always visible, 20px above the screen bottom", use fixed positioning so the box stays anchored to the viewport. Example:

    .box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

  • If the intent is "20px above the bottom of the full page (only at page end)", keep the box in normal flow as the last DOM element and give it a bottom margin (or add padding-bottom to the page wrapper). That way it naturally sits 20px from the document end and will scroll into view.

  • If you need an overlay anchored to a specific container, make that container position: relative and then position the box inside it — this ensures the offsets are relative to that container.

Troubleshooting tips: inspect the computed position and the element’s offset parent in DevTools, look for positioned ancestors, overflow or clipping on parents, floating elements, or broken HTML that alters layout. For general positioning behavior see MDN: position.

Recommended Answers

All 3 Replies

Member Avatar for buddylee17

Yes. Use absolute positioning and set bottom attribute to 20px.

position:absolute;
bottom:20px;
Member Avatar for AndyTT75

In fact, that was my first appraoch - but it doesnt work

Member Avatar for buddylee17

Validate the page with the W3C. You could have an open element or an error causing this to not work.

Just to see what it should do, create a blank html page and put only the following into the body of the document:

<div style="position:absolute; bottom:40px">
This div should be 40px from the bottom.
</div>
<div style="position:absolute; bottom:20px">
This div should be 20px from the bottom.
</div>
<div style="position:absolute; bottom:0">
This div should be at the bottom of the page.
</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.