How to set a fixed bottom shadow for a scrollable div?

Question

I'd like to set a box-shadow for a div that would stay in a fixed position, but would have a scrollable content. To make it more understandable, it would work like so: http://jsfiddle.net/Dud8V/ - how can I make the shadow stay in it's position even when the div is scrolling?

Thank you.

Answer 1

you could use a fixed background , http://codepen.io/anon/pen/zGIrf

#chatroom {
  position: relative;
  height:50px;
  overflow: scroll;
  background:linear-gradient(to bottom, 
    blue 0 ,
    pink 50px) no-repeat top;/*linear-gradient()  can be replaced by an image url(myImage)  to include older browser */
  background-size:100% 50px;
  background-attachment:fixed;
}

.chatmessage:nth-child(2n) {
  background: #EEE;
}