Scroll overflow issue with fixed element

Question

Basically I'm trying to have a scroll overflow-y in my chatbox. The thing is; I got a header to the chatbox too which is being overflown by the chat content before it is being scrollable. I want it to stop overflowing before the <div class="header">Social Chat</div> so that it is never being overlapped.

Also; right now the content never gets scroll-able - I have no idea why. Here is my jsfiddle: http://jsfiddle.net/FcEdx/

y dont u put overflowscroll for your message wrapper..?

Vivek Vikranth
– Vivek Vikranth

2014-03-30 19:22:07 +00:00
Commented Mar 30, 2014 at 19:22 — Vivek Vikranth
– Vivek Vikranth, Commented Mar 30, 2014 at 19:22
@VivekVikranth Doing so changes nothing.

Jamie Romeo
– Jamie Romeo

2014-03-30 19:39:10 +00:00
Commented Mar 30, 2014 at 19:39 — Jamie Romeo
– Jamie Romeo, Commented Mar 30, 2014 at 19:39

Anubhav · Accepted Answer · 2014-03-30 19:55:58Z

2

is this what you are looking for?

http://jsfiddle.net/FcEdx/9/

i modified the css as follows

.header
    {
        position: absolute;  
        z-index: 2;
        width: 100%;
    }
.chat-messages-wrapper {
    position: absolute;
    bottom: 5px;
    padding-left: 7px;
    padding-right: 7px;
    height: 100%;
    overflow-y: auto;
}

answered Mar 30, 2014 at 19:55

Anubhav

7,2465 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jamie Romeo Over a year ago

Yes this is great! One thing though; would it be possible to make it so it's scrolled to the bottom on the page load through css? Or would that have to be done through JS?

Anubhav Over a year ago

yes you can achieve that with JS by appending the new message div at the end every time. do mark this answer if it helped

Jamie Romeo Over a year ago

Ahh thanks! One final question: I see that if I limit the number of messages to, say 2 (and keep the screen at full resolution). The send message box get's pushed up from the bottom. Any way to avoid this?

Anubhav Over a year ago

use auto height for the wrapper and not 95%;

Jamie Romeo Over a year ago

You're a freaking wizard! Thank you so much! EDIT: When I put auto height it disables the scrolling - what's the issue here?

|

Collectives™ on Stack Overflow

Scroll overflow issue with fixed element

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related