HTML: Set scroll on div table-row - html

Question

Hello i try to set scroll in .chat .body (overflow-y: scroll), i try every code but not work.
thanks in advance !
////////////////////////////////////////
Code:
<div class="chat">
<div class="head"></div>
<div class="body">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" width="40">
<img src="http://www.exclutips.com/wp-content/uploads/2015/08/wordpress-custom-user-avatar.png" style="
width: 32px;
height: 32px;
display: block;
border: 1px solid rgba(0, 0, 0, .1);
cursor: pointer;
">
</td>
<td align="left" width="136">
<div class="user-name">User Name</div>
</td>
<td align="right">
<span class="online-icon"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer">
<input type="text" placeholder="Search">
</div>
</div>
<style type="text/css">
* { font-family: "Segoe UI"; }
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #F2F2F2;
height: 100%;
}
input, select {
display: block;
width: 100%;
padding: 5px;
outline: none;
border-width: 1px;
border-style: solid;
border-radius: 0;
background: #fff;
font-size: 12px;
color: #6B6B6B;
appearance:normal;
-moz-appearance:none;
-webkit-appearance:none;
border-color: #BDBDBD;
}
div, textarea, input, select, button, a { box-sizing: border-box; -moz-box-sizing: border-box; }
.chat {
display: table;
border-left: 1px solid #ccc;
position: fixed;
height: 100%;
top: 0;
right: 0;
bottom: 0;
width: 200px;
margin: 0;
padding: 0;
background: #E1E1E1;
}
.chat .head {
display: table-row !important;
height: 52px;
}
.chat .body {
overflow-y: scroll;
display: table-row;
height: 100% !important;
}
.chat .body table {
cursor: pointer;
padding: 5px;
}
.chat .footer {
display: table-row !important;
}
</style>
Check demo here: http://chatiiii.hol.es/default.php

Answer 1

You can use jQuery to set .body height :
* {
box-sizing:border-box;
...
}
.chat {
display: block;
...
}
.chat .head {
height: 52px;
...
}
.chat .body {
overflow-y: auto;
...
}
and jQuery
$(document).ready(function () {
setSize();
$(window).on('resize',setSize);
});
function setSize(){
var CH = $('.chat').height(),
HH = $('.chat .head').height(),
FH = $('.chat .footer').height();
$('.chat .body').height(CH-HH-FH);
}
see full example here.

Answer 2

Remove display: table-row; from .chat .body.

Answer 3

use this style for .chat .body class , but you should duplicate user table in html until it come more than page's height , then you can see scroll comes.
.chat .body {
overflow-y: scroll;
height: 80%;
}
You should remove display: table-row , and also give a height less than 100% .