我无法理解我的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>
以下是截图:
答案 0 :(得分: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>
答案 1 :(得分:0)
试
.panel-body-primary {
height: 100%
}
答案 2 :(得分:0)
您的HTML
和BODY
元素也需要设置为最大高度。标记为height:100%
的任何内部元素都是CONTAINER的100%,而不是WINDOW。
只有HTML将窗口作为容器,而BODY就是HTML下面的容器。
添加
html,body {
height:100%;
min-height:100%;
max-height:100%;
}
以及height:100%
到您的内容容器div。