为什么我的html页面显示半页？
我无法理解我的html页面没有显示完整的页面。。。它是从上到下显示。这是我的HTML代码。从一半开始显示页面的css样式在哪里为什么我的html页面显示半页？,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我无法理解我的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 mi
<!-- 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>
.聊天
{
列表样式：无；
保证金：0；
填充：0；
}
.chat li
{
边缘底部：10px；
垫底：5px；
边框底部：1px虚线#B3A9A9；
}
.聊天室李.左.聊天室正文
{
左边距：60像素；
}
.聊天室李.对.聊天室
{
右边距：60px；
}
.chat li.chat body p
{
保证金：0；
颜色：#777777；
}
.panel.slidedown.glyph图标、.chat.glyph图标
{
右边距：5px；
}
.小组委员会
{
溢出y：滚动；
高度：250px；
}
：-webkit滚动条轨迹
{
-webkit盒阴影：插入0.0 6px rgba（0,0,0,0.3）；
背景色：#F5；
}
：-webkit滚动条
{
宽度：12px；
背景色：#F5；
}
：-webkit滚动条拇指
{
-webkit盒阴影：插入0.0 6px rgba（0,0,0,3）；
背景色：#555；
}
聊天
-
杰克·斯派洛
Lorem ipsum dolor sit amet，是一位杰出的献身者。比本杜姆库拉比图尔酒店
多洛，我是乌拉姆科珀苏打利古拉。
发送
函数sendmessage（）
{
var message=document.getElementById（'btn-input'）。值；
var chatcontent=“”；
chatcontent+=document.getElementById（'chatcontent'）.innerHTML；
var strVar=“”；
strVar+=“”；
strVar+=“”；
strVar+=“”；
strVar+=“”；
strVar+=“”；
strVar+=“Bhumik Patel”；
strVar+=“”；
strVar+=“”；
strVar+=消息；
strVar+=“”；
strVar+=“”；
strVar+=“”；
chatcontent+=strVar；
document.getElementById（'chatcontent'）。innerHTML=chatcontent；
document.getElementById（'btn-input'）。值=''；
}
$.fn.enterKey=function（fnc）{返回this.each（function（）{$（this.keypress）（function（ev）{var-keycode=（ev.keycode？ev.keycode:ev.which）；if（keycode='13'）{document.getElementById（“btn chat”）.click（）；}}
$（“#btn输入”）.enterKey（函数（）{sendmessage（）；}）；
您的
HTMLBODY以及
高度：100%<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>
身体
{
溢出：隐藏；
}
.聊天
{
列表样式：无；
保证金：0；
填充：0；
}
.chat li
{
边缘底部：10px；
垫底：5px；
边框底部：1px虚线#B3A9A9；
}
.聊天室李.左.聊天室正文
{
左边距：60像素；
}
.聊天室李.对.聊天室
{
右边距：60px；
}
.chat li.chat body p
{
保证金：0；
颜色：#777777；
}
.panel.slidedown.glyph图标、.chat.glyph图标
{
右边距：5px；
页边距底部：0；
}
.小组初选
{
页边距底部：0；
}
.小组标题
{
身高：10%；
}
.小组委员会
{
溢出y：滚动；
身高：80%；
}
.面板页脚
{
身高：10%；
边界：0；
}
：-webkit滚动条轨迹
{
-webkit盒阴影：插入0.0 6px rgba（0,0,0,0.3）；
背景色：#F5；
}
：-webkit滚动条
{
宽度：12px；
背景色：#F5；
}
：-webkit滚动条拇指{
-webkit盒阴影：插入0 0 6px rgba（0,0,0,3）；
背景色：#555；
}
html,body {
height:100%;
min-height:100%;
max-height:100%;
}
<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>