1

So I'm working on styling my message/conversation page of my website and I'm running into a little difficulty.

This is what I would like to work out in the end. When opening a conversation the last 15-20 messages will be loaded into a div but I would like the div to fit in one page. What I mean by that is that the div should be the height of the screen the only thing that I want to scroll up and down is the messages.

The header of my website should always be visible. When you scroll down and get to the end of the conversation the whole page scrolls down a bit to display the footer of my website.

What I want pretty much looks like the Facebook messaging page.

enter image description here

I don't know if you can understand what I am asking so I'm adding a little example with the Facebook message page (the scrollbar is not on the picture). In the image it is what you get when you load the page, if then you scroll down there will be the footer that will appear if you scroll up the reply box will stick to the bottom of the screen and the only thing that moves is the conversation (the middle red square)

Once this will work I will be adding a feature to load messages once you get to the top of the loaded messages.

I'm not sur if it is possible to do this with only CSS, I'm pretty sure I will have to use some Jquery at some point but I would like to make everything that is possible in CSS with CSS.

I have no real idea how to make this happen.

Community
  • 1
  • 1
Joris Blanc
  • 601
  • 1
  • 10
  • 24

3 Answers3

0

Here's a little demo: little link. The basic and sufficient relevant CSS is:

html, body {
    height: 100%; /*100% of window*/
}
#messages {
   height: 80%; /*limit the height to 80% of the page*/
   overflow-y: auto; /*messages don't fit? add scrollbars*/  
}

HTML:

<div id = "messages">
    <div class = "message">Glee is awesome!</div>
    <div class = "message">Glee is awesome!</div>
    <div class = "message">Glee is awesome!</div>
    ...
</div>
<div>...Stuff for sending here...</div>

Hope that helped in any manner!

Chris
  • 26,544
  • 5
  • 58
  • 71
0

Another solution would be setting following CSS-

For header 

{position:fixed;top:0px;}

For replybox

{position:fixed;bottom:0px;}
MayThrow
  • 2,159
  • 4
  • 24
  • 38
0

You may try something like the code below to style your messages div;

#yourdiv {
    position: absolute;
    top: 35px; //This is the height of your header.
    width: 400px;//Width of your message div.
    bottom: 0;
    background-color: gray;
    overflow-y: auto;//Only scrolls vertically
}

Here is a working Live Demo. (In the demo, the message div is aligned left. you can change this by setting margin. If you want to make it middle of page, try auto for both left and right margins)

Hope this helps.

Alfred
  • 21,058
  • 61
  • 167
  • 249