why my html page is showing half page?

Question

i cant understand that my html page is not showing with full page... It is showing from the top to the half. Here is my HTML code. Where is the css style that shows page from half?

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.chat
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat li
{
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #B3A9A9;
}

.chat li.left .chat-body
{
    margin-left: 60px;
}

.chat li.right .chat-body
{
    margin-right: 60px;
}


.chat li .chat-body p
{
    margin: 0;
    color: #777777;
}

.panel .slidedown .glyphicon, .chat .glyphicon
{
    margin-right: 5px;
}

.panel-body
{
    overflow-y: scroll;
    height: 250px;
}

::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

</style>




            <div class="panel panel-primary">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-comment"></span> Chat
                    <div class="btn-group pull-right">
                        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                            <span class="glyphicon glyphicon-chevron-down"></span>
                        </button>
                        <ul class="dropdown-menu slidedown">
                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-refresh">
                            </span>Refresh</a></li>
                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-ok-sign">
                            </span>Available</a></li>
                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-remove">
                            </span>Busy</a></li>
                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-time"></span>
                                Away</a></li>
                            <li class="divider"></li>
                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-off"></span>
                                Sign Out</a></li>
                        </ul>
                    </div>
                </div>
                <div class="panel-body">
                    <ul class="chat" id="chatcontent">
                        <li class="left clearfix"><span class="chat-img pull-left">
                            <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
                        </span>
                            <div class="chat-body clearfix">
                                <div class="header">
                                    <strong class="primary-font">Jack Sparrow</strong>
                                </div>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
                                    dolor, quis ullamcorper ligula sodales.
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="panel-footer">
                    <div class="input-group">
                        <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
                        <span class="input-group-btn">
                            <button class="btn btn-warning btn-sm" id="btn-chat" onclick="sendmessage();">
                                Send</button>
                        </span>
                    </div>
                </div>
            </div>
<script type="text/javascript">
function sendmessage()
{
var message = document.getElementById('btn-input').value;
var chatcontent = "";
chatcontent += document.getElementById('chatcontent').innerHTML;
var strVar="";
strVar += "                        <li class=\"left clearfix\"><span class=\"chat-img pull-left\">";
strVar += "                            <img src=\"https:\/\/cdn2.iconfinder.com\/data\/icons\/windows-8-metro-style\/64\/user.png\" alt=\"User Avatar\" class=\"img-circle\" \/>";
strVar += "                        <\/span>";
strVar += "                            <div class=\"chat-body clearfix\">";
strVar += "                                <div class=\"header\">";
strVar += "                                    <strong class=\"primary-font\">Bhaumik Patel<\/strong>";
strVar += "                                <\/div>";
strVar += "                                <p>";
strVar += message;
strVar += "                                <\/p>";
strVar += "                            <\/div>";
strVar += "                        <\/li>";

chatcontent += strVar;
document.getElementById('chatcontent').innerHTML = chatcontent;
document.getElementById('btn-input').value = '';
}

$.fn.enterKey=function(fnc){return this.each(function(){$(this).keypress(function(ev){var keycode=(ev.keyCode?ev.keyCode:ev.which);if(keycode=='13'){document.getElementById("btn-chat").click();}})})}
$("#btn-input").enterKey(function(){sendmessage();});
</script>

And here is the screenshot:

Answer 1

Your panel-header, panel-body and panel-footer need to be changed along with few other changes. here is the modified code.

<style type="text/css">
    body
    {
        overflow: hidden;
    }

    .chat
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .chat li
    {
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1px dotted #B3A9A9;
    }

    .chat li.left .chat-body
    {
        margin-left: 60px;
    }

    .chat li.right .chat-body
    {
        margin-right: 60px;
    }


    .chat li .chat-body p
    {
        margin: 0;
        color: #777777;
    }

    .panel .slidedown .glyphicon, .chat .glyphicon
    {
        margin-right: 5px;
        margin-bottom: 0;
    }

    .panel-primary
    {
        margin-bottom: 0;
    }

    .panel-heading
    {
        height: 10%;
    }

    .panel-body
    {
        overflow-y: scroll;
        height: 80%;

    }

    .panel-footer
    {
        height: 10%;
        border: 0;
    }

    ::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar
    {
        width: 12px;
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #555;
    }


</style>

Answer 2

try

.panel-body-primary {
     height: 100%
}

Answer 3

Your HTML and BODY elements need to be set to maximum height as well. Any internal elements which are marked at height:100% are the 100% of the CONTAINER, not the WINDOW.

Only HTML has the window as it's container, and BODY is the container immediately below HTML.

Add

html,body {
  height:100%;
  min-height:100%;
  max-height:100%;
}

as well as height:100% to your content container divs.