Почему моя страница html показывает половину страницы?

Question

Я не могу понять, что моя страница html не отображается с полной страницей ... Она показывает сверху до половины. Вот мой код HTML. Где стиль css, показывающий страницу из половины?

<!-- 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> 

А вот скриншот:

Answer 1

Ваш панельный заголовок, панель-панель и нижний колонтитул необходимо изменить вместе с несколькими другими изменениями. здесь приведен модифицированный код.

<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

попробовать должны быть установлены на максимальную высоту, а

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

Answer 3

HTML Ваши и BODY элементы. Любые внутренние элементы, отмеченные на height:100%, являются 100% КОНТЕЙНЕРА, а не ОКНА.

Только HTML имеет окно как контейнер, а BODY - это контейнер непосредственно под HTML.

Добавить

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

, а также height:100% ваших контейнеров дивы контента.