bottom 20 px from "canvas" NOT screen - possible ?

[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 !

[buddylee17]

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

position:absolute;
bottom:20px;

[AndyTT75]

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

[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>