Chat window full height and doesn't follow the screen

Question

i have a little problem in CSS. The chat window does not take full height. If i scroll into the bottom the chat window won't follow the screen.

Thanks, i'm stuck, i don't know where i have to put min-height: 100%; and if it's really the problem.

enter image description here Index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jQuery AJAX Chat Demo - Like on Facebook or Gmail</title>    
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta charset="utf-8">
    <link href="css/chat.css" rel="stylesheet" type="text/css" />       
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>   

</head>
<body>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"<br /><br />

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"<br /> <br />

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" <br /> <br />

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" <br /> <br />

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"<br /><br />

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"<br /> <br />

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" <br /> <br />

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" <br /> <br />

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"<br /><br />

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"<br /> <br />

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" <br /> <br />

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" <br /> <br />

<div class="index_reload">
    <!--index_reload-->
    <div id="chat_area">
    <div class="chat_box main_chat" id="chat_id">
        <!--chat_box-->
        <div class="user_box">
            <div class="name open_chat left">Discussion</div>
            <div class="closed right">x &nbsp;</div>
            <div class="clear"></div>
        </div>
        <div class="wrap_box">
            <!--wrap_box-->
            <div class="message_content">
                <!--message_content-->
                <div id="reply_output">
        <?php
        //load users from database
        $users = mysql_query("SELECT id,username FROM ".$sql_table_users." WHERE id!='".$_SESSION['user_id']."'");
        if(mysql_num_rows($users) > 0){
            while($user = mysql_fetch_array($users)){
            ?>
                    <div class="message_post">
                        <img src="http://cdn6.f-cdn.com/ppic/8041241/logo/7087292/profile_logo_7087292.jpg" width="35" class="left user_img">
                <?php
                //ALT tag contains user ID and user name 
                echo '<div class="message_text left"><a href="#" alt="'.$user['id'].'|'.$user['username'].'" class="chat_user">'.$user['username'].'</a><br />';
        ?></div>
                        <div class="clear"></div>
                    </div>
                    <?php } } ?>

                </div>
            </div>
            <!--message_content-->
        </div>
        <!--wrap_box-->
    </div>
</div>
</div>
<!--index_reload-->

<script language="Javascript">
$(document).ready(function () {
    // Closed
    $('.closed').click(function () {
        $('.wrap_box').hide();
        $('.main_chat').addClass('hide_wrap_box');
    });
    // Open
    $('.open_chat').click(function () {
        $('.wrap_box').show();
        $('.main_chat').removeClass('hide_wrap_box');
    });
});
</script>

</body>
</html>

My css :

body {
    margin:0px;
    padding:0px;
}
* {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
.chat_box {
    display:inline-block;
    border:1px solid #9c9c9c;
    width:250px;
    margin-left: 5px;
}
.user_box {
    display:block;
    padding:4px;
    background-color:#000;
    color:#fff;
    bottom:0;
}
.user_box:hover {
    cursor:pointer;
}
.left {
    float:left;
}
.right {
    float:right;
}
.clear {
    clear:both;
}
.message_post {
    border-top:1px solid #000;
    display:block;
    padding:5px 3px;
}
.message_text {
    margin-left:5px;
}
.message_content {
    border:1px solid #ddd;
    height:750px;
    overflow-y:scroll;
}
.box_reply {
    border:1px solid #ddd;
}
.text_reply {
    display:block;
    width:99%;
}
.user_img {
}
.hide_wrap_box {
    height:22px;
    bottom:0;
}
.name {
    display: block;
    width: 80%;
}
.index_reload {
    border: 1px solid #ddd;
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 100%;
}
#chat_area {
    float:right;
}

Please always provide a live example of your code, using http://jsfiddle.net/ or similar. — CBroe, Mar 14 '14 at 11:51
_“If i scroll into the bottom the chat window won't follow the screen.”_ – maybe you are looking for `position:fixed`. — CBroe, Mar 14 '14 at 11:52
Any idea guys ? The user box class has a height which is too much. http://www.project-heberg.fr/CREAZ/ — user3162341, Mar 14 '14 at 13:53

score 1 · Answer 1 · answered Mar 14 '14 at 11:42

1

Only a starting point, css % heights will only take effect if the parent element has a height.

Throw this into your css to see if it gets you any closer

html, body, .index_reload, #chat_area, .chat_box, .user_box { height:100%; }

answered Mar 14 '14 at 11:42

Rob Sedgwick

5,216
4
20
36

It doesn't change anything :/ – user3162341 Mar 14 '14 at 11:43
@user3162341 Missed a few - updated ^ ( the principle is that heights in percentages need parent elements to have heights set ) – Rob Sedgwick Mar 14 '14 at 11:44
Hey you're close, for user_box the height is too important . Look there the result : http://www.project-heberg.fr/CREAZ/ – user3162341 Mar 14 '14 at 12:30
@user3162341 - great stuff – Rob Sedgwick Mar 14 '14 at 12:33
the height for user class is too important . can you see that ? ^^ – user3162341 Mar 14 '14 at 12:35
you mean for the `.message_content` class ? *( I already added `.user_box` )* – Rob Sedgwick Mar 14 '14 at 12:44
I know that you've already added user_box but the height 100% is too much. Look the black part where it's writen "Discussion" . – user3162341 Mar 14 '14 at 12:46
sure thing @user3162341 - was just getting you close ( however you get it to fit for the job is cool- I get it) – Rob Sedgwick Mar 14 '14 at 13:53

score 0 · Answer 2 · edited May 23 '17 at 12:21

Why the chat area should be full height, when you explicit declared it's height to 750px?

Change it to this:

html, body
{
   height:100%;
   overflow: hidden;
}

.message_content {
    border:1px solid #ddd;
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
    overflow-y:scroll;
}

Edit: I read your question the wrong way, but i leave this here:

To the problem that you have no auto-scroll to the bottom: You will need to use Javascript to do so. Here is a thrad for this: Scroll to bottom of div?

score 0 · Answer 3 · answered Mar 14 '14 at 11:52

make first

html{height :100%;}

then

.message_content {
    border:1px solid #ddd;
    height:750px; // don't set height in px
    height:100%; // use this
    overflow-y:scroll;
}

and normalize all tags padding and margin

*{
 padding:0;
 margin:0;}

Chat window full height and doesn't follow the screen

3 Answers3