Dynamic Height for padding-bottom with jQuery

i have a little problem. At the followed link you can see a small jQuery-based comment field.

If i clicked the more button ("mehr") on the left side, it will open the detailbox which belongs to the current box left. The detailboxes are absolute positioned, so if the detailbox is heigher than the free place it will cropped at the bottom of the wrapper box.

Is开发者_开发百科 it understandable? :)

jQuery comment toggle

I hope anyone can help me, `cause i must finish it today ;)

Regards from Berlin

You can check if the css top + height value of the detail box is more than the container value and then add a negative top margin to offset it.

For example if:

• #wrapper has a height of 900px
• mag 9 mehr is clicked
• .detail-45 has a height of 274px
• .detail-45 has a top position of 800px
• add a negative top margin to .detail-45 of -174px which is 900-(800+274)

You just have to add this check in your click handler.

(You can also just change the value of top if you like, but if you don't want to do the extra math, this is a nice compromise.)