Question: I'm trying to add some decorative flourishes on a page footer with **:after** pseudo-element.

The problem is that depending on my css code the decorative flourish element(fixed size, uses background image) either gets clipped by the footer or ends up extending the page height and adds vertical scroll bars.

What I need is the decorative element to start at the footer top border(in other words where the page content ends) and clip at page bottom(or if screen space allows, don't clip at all).

I'm able to provide a link to the code later if my question isn't clear enough.

**EDIT**: In other words, I'd like to know if there is any sane way to prevent vertical scrollbars from appearing when the bottom edge of *a specific* absolutely positioned element goes over the page bottom.

**EDIT2**: The site is currently available at <http://www.ikimark.fi/ikimark_uusi/site>
The decoration in question is the right bottom corner flourish image. I'm editing the site today so the code may change.

Answer: 
Please provide a link to your project and try using `position:absolute;z-index:9999;`

EDIT:

well I'm still confused about exactly what you are asking for. If you want flourish image not to cover too much space below the contents and fill up the total height of the footer only then please add `overflow: hidden;` at your `wrap` `div`. And if you don't want this then please can you explain?
Try setting an absolute height on the bottom div with overflow-y: hidden as follows:

`<div id="footer" style="height: 4em; overflow-y: hidden"></div>`