Ito Ito - 7 months ago 32
HTML Question

Create a div chat like a facebook one

In brief example I'm trying to do a div chat example to simulate a facebook chat.

I fixed it on the right with z-index 300 to always be showed.

My problem is about height because some pages I have scroll and large height view and my chat div fixed on the same original page height, if I scroll up or scroll down I limit the height of my div.

I wonder it just fixed enough to stay visible on the page in the same original way even I scroll page up or page down.

My sample CSS is:

#chat {
position: absolute;
top: 0;
right: 0;
float: right;
height: 100%;
min-height: 100%;
width: 200px;
background-color: #6e9bfe;
z-index: 300;
}


Any tips would be very helpful, thanks!

Answer

If I'm right in thinking you want this div to stay in the same position as you scroll up and down the page you want to use position:fixed; instead of position:absolute; in your CSS.