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
  • 66 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by buddylee17
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.