为什么我的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%到您的内容容器div。