如何修复div高度 [英] How to fix a div height
本文介绍了如何修复div高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我输入文字，这是用来做一个休息电话，得到响应，并将其添加到聊天窗口。
目前我的问题是这样的，聊天窗口变大，页面随聊天框（div ）。有人可以让我知道我怎么能阻止整个页面的增量。
简单来说，我的要求是聊天窗口的初始高度是 X ，并且用户询问一个查询，响应进入聊天窗口，用户询问另一个，发生同样的事情，但页面不应该滚动，而是聊天窗口应该（这已经发生在我的代码中）。
以下是我的代码。
< HTML>
< head>
< meta charset =utf-8/>
< meta name =viewport
content =width = device-width，initial-scale = 1，maximum-scale = 1/>
< meta name =descriptioncontent =/>
< meta name =authorcontent =/>
< link rel =stylesheet
href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
< script
src =https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js>< / script>
src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>
<！ - [if IE]>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1>
<！[endif] - >
< title> Bootstrap聊天框示例< / title>
<！ - BOOTSTRAP CORE STYLE CSS - >
< link href =assets / css / bootstrap.css =stylesheet/>
<！ - FONT AWESOME CSS - >
< link href =assets / css / font-awesome.css =stylesheet/>
<！ - CUSTOM STYLE CSS - >
< link href =assets / css / style.css =stylesheet/>
< script type =text / javascriptsrc =assets / js / jquery.min.js>< / script>
< script type =text / javascript>
// jQuery Document
$（document）.keypress（function（e）{
if（e.which == 13）{
$（＃ submitmsg）。click（）;
}
}）;
$（document）.ready（function（）{
$（'＃submitmsg'）。bind（'click'，function（）{
var message = $（ '#usermsg'）。val（）;
$（'＃chatbox'）。append（'< p> + message +'< / p>'）;
$（'＃' （''）;
// alert（message）;
}）;
}）;
函数serverResponse（消息）{
$（'＃chatbox'）。append（'< p> Server：'+ message +'< / p>'）;
$ b $（＃submitmsg）
.click（
function（）{
alert（Hi）;
var inputsText = $（＃usermsg）.val（）;
var params = {};
var controllerUrl ='https://westus.api.cognitive.microsoft.com /qnamaker/v1.0/knowledgebases/bde3c190-58bd-40d8-9ff1-c35eb18588be/generateAnswer';
$ .ajax（{
url：controllerUrl，
type：'POST'，
data：{
question：inputsText
}，
beforeSend：function（xhrObj）{
//请求头文件
xhrObj.setRequestHeader（
Ocp-Apim-Subscription-Key，MyKey）;
xhrObj.setRequestHeader（'Content-Type'，
'application / json;字符集= UTF-8’ ）;
}，
success：function（data）{
var dataObj = data;
alert（'Data：'+ JSON.stringify（dataObj））;
$（'＃resultvalue'）。html（data）;
serverResponse（JSON.stringify（dataObj））;
alert（data）;
}
}）;
}）;
< / script>
< / head>
< body>
< nav class =menu>
< div class =container-fluid>
< div class =navbar-header>
< div class =back>
< img src =acn.jpgdraggable =false/>
< / div>
< div class =name>我的机器人< / div>
< / div>
< ul class =nav navbar-nav navbar-right>
< li>< a href =＃>< span class =glyphicon glyphicon-user>< / span>
使用者名称< / a>< / li>
< a>< a href =＃>< span class =glyphicon glyphicon-log-out>< / span>
注销< / a>< / li>
< / ul>
< / div>
< / nav>
< br />
< br />
< br />
< div class =container>
< div class =row pad-top pad-bottom>
< div class =col-lg-3 col-md-3 col-sm-3>
< div class =chat-box-new-div>
< div class =chat-box-new-head>合规头像< / div>
< div class =panel-body chat-box-new>
< br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br />
< br /> < br /> < br /> < br />
< / div>
< / div>
< / div>
< div class =col-lg-6 col-md-6 col-sm-6>
< div class =chat-box-div>
< div class =chat-box-head>
CHAT HISTORY
< div class =btn-group pull-right>
< button type =buttonclass =btn btn-info dropdown-toggle
data-toggle =dropdownaria-expanded =false>
< span class =fa fa-cogs>< / span> < span class =sr-only>切换
下拉菜单< / span>
< / button>
< ul class =dropdown-menurole =menu>
< / ul>
< / div>
< / div>
< div class =panel-body chat-box-main>
< div class =chat-box-left>您好，欢迎！您可以问我关于合规政策的
问题。< / div>
< div class =chat-box-name-left>
< img src =compiler-bot-static.gif
alt =引导聊天框用户图像class =img-circle/> - Bot
< / div>
< hr class =hr-clas/>
< div class =chat-box-rightid =chatbox>< / div>
< div class =chat-box-name-right>
< img src =smiley.jpgalt =引导聊天框用户图片
class =img-circle/> - You
< / div>
< / div>
< div class =chat-box-footer>
< div class =input-group>
< input type =textclass =form-control
placeholder =在此处输入文字...id =usermsg> < span
class =input-group-btn>
< button class =btn btn-infotype =buttonid =submitmsg>发送< / button>
< / span>
< / div>
< / div>
< / div>
< / div>
< div class =col-lg-3 col-md-3 col-sm-3>
< div class =chat-box-new-div>
< div class =chat-box-new-head>常见问题解答..
< / div>
< div class =panel-body chat-box-new>
< br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br />
< br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br />
< br /> < br /> < br />
< / div>
< / div>
< / div>
< / div>
<！ - 使用下面的脚本来减少加载时间 - >
<！ - 核心JQUERY SCRIPTS文件 - >
< script src =assets / js / jquery-1.11.1.js>< / script>
<！ - 核心BOOTSTRAP SCRIPTS文件 - >
< script src =assets / js / bootstrap.js>< / script>
< / body>
< / html>
我的CSS：
.hr-clas {
border-top：1px solid＃A12EB3;
}
.chat-box-main {
max-height：500px;
溢出：auto;
}
.chat-box-div {
border：2px solid＃A12EB3;
border-bottom：2px solid＃A12EB3;
}
.chat-box-head {
padding：10px 15px;
border-bottom：2px solid＃A12EB3;
背景颜色：＃B25AE5;
颜色：#fff;
text-align：center;
}
.chat-box-left {
width：100％;
height：auto;
padding：15px;
-webkit-border-radius：5px;
-moz-border-radius：5px;
border-radius：5px;
职位：亲属;
border：1px solid＃C5C5C5;
font-size：12px;
}
.chat-box-left：after {
top：100％;还剩
：10％;
border：固体透明;
content：;
位置：绝对;
border-top-color：＃C5C5C5;
border-width：15px;
margin-left：-15px;
}
.chat-box-name-left {
margin-top：30px;
margin-left：60px;
text-align：left;
颜色：＃049E64;
}
.chat-box-name-left img {
max-width：40px;
border：2px solid＃049E64;
}
.chat-box-right {
width：100％;
height：auto;
padding：15px;
-webkit-border-radius：5px;
-moz-border-radius：5px;
border-radius：5px;
职位：亲属;
border：1px solid＃C5C5C5;
font-size：12px;
}
.chat-box-right：之后{
top：100％;
正确：10％;
border：固体透明;
content：;
位置：绝对;
border-top-color：＃C5C5C5;
border-width：15px;
margin-left：-15px;
}
。聊天框名称右{
color：＃354EA0;
margin-top：30px;
margin-right：60px;
text-align：right;
}
。聊天方块名称右img {
最大宽度：40px;
border：2px solid＃354EA0;
}
.chat-box-footer {
background-color：＃D8D8D8;
padding：10px;
}
请让我知道我该如何解决这个问题。
当前问题图片
当页面被加载时
在我发送 Hi 作为输入之后
谢谢
解决方案
鉴于你的描述上面的东西像下面应该工作（非常简化）
< div id =chatContainer>
< div style =height：400px; overflow-y：auto;>
<！ - 您的聊天内容到此为止 - >
< / div>
< textarea id =HaveYourSay>< / textarea>
< button onclick =SendChat（）>发送< / button>
< / div>
在应用滚动条之前，这将允许div的内容达到400px的高度
我没有使用过你的HTML，但保持上面的例子简单，以便你可以将它应用到你自己的应用程序。
查看JS Fiddle： https://jsfiddle.net/6nep283h/1/
请注意，为了简单起见，我在这里使用了内联样式 - 我不建议在您的应用中使用它们。
I'm working on a chat control app and my issue is like this.
I enter the text, this is used to make a rest call, get the response, and add it to the chat window.
Currently my issue is like this, the chat window gets bigger and the page gets a scroll along with the chat box(div). Can someone please let me know how can I stop this increment in the entire page.
In simple terms my requirement is the chat window will have an initial height say X and the user asks a query, the response gets pitched into the chat window, the user asks another and the same thing happens, but the page shouldn't get a scroll, instead the chat window should(This is already happening in my code).
Below is my code.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Bootstrap Chat Box Example</title>
<!-- BOOTSTRAP CORE STYLE CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONT AWESOME CSS -->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- CUSTOM STYLE CSS -->
<link href="assets/css/style.css" rel="stylesheet" />
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).keypress(function(e) {
if (e.which == 13) {
$("#submitmsg").click();
}
});
$(document).ready(function() {
$('#submitmsg').bind('click', function() {
var message = $('#usermsg').val();
$('#chatbox').append('<p>' + message + '</p>');
$('#usermsg').val('');
//alert(message);
});
});
function serverResponse(message) {
$('#chatbox').append('<p>Server: ' + message + '</p>');
}
$("#submitmsg")
.click(
function() {
alert("Hi");
var inputtedText = $("#usermsg").val();
var params = {};
var controllerUrl = 'https://westus.api.cognitive.microsoft.com/qnamaker/v1.0/knowledgebases/bde3c190-58bd-40d8-9ff1-c35eb18588be/generateAnswer';
$.ajax({
url : controllerUrl,
type : 'POST',
data : {
"question" : inputtedText
},
beforeSend : function(xhrObj) {
// Request headers
xhrObj.setRequestHeader(
"Ocp-Apim-Subscription-Key", "MyKey");
xhrObj.setRequestHeader('Content-Type',
'application/json; charset=UTF-8');
},
success : function(data) {
var dataObj = data;
alert('Data:' + JSON.stringify(dataObj));
$('#resultvalue').html(data);
serverResponse(JSON.stringify(dataObj));
alert(data);
}
});
});
</script>
</head>
<body>
<nav class="menu">
<div class="container-fluid">
<div class="navbar-header">
<div class="back">
<img src="acn.jpg" draggable="false" />
</div>
<div class="name">My Bot</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
User Name</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
Logout</a></li>
</ul>
</div>
</nav>
<br />
<br />
<br />
<div class="container">
<div class="row pad-top pad-bottom">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="chat-box-new-div">
<div class="chat-box-new-head">Compliance Avatar</div>
<div class="panel-body chat-box-new">
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
</div>
</div>
</div>
<div class=" col-lg-6 col-md-6 col-sm-6">
<div class="chat-box-div">
<div class="chat-box-head">
CHAT HISTORY
<div class="btn-group pull-right">
<button type="button" class="btn btn-info dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
<span class="fa fa-cogs"></span> <span class="sr-only">Toggle
Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
</ul>
</div>
</div>
<div class="panel-body chat-box-main">
<div class="chat-box-left">Hello, Welcome!. You can ask me
questions on Compliance Policy ..</div>
<div class="chat-box-name-left">
<img src="compiler-bot-static.gif"
alt="bootstrap Chat box user image" class="img-circle" /> - Bot
</div>
<hr class="hr-clas" />
<div class="chat-box-right" id="chatbox"></div>
<div class="chat-box-name-right">
<img src="smiley.jpg" alt="bootstrap Chat box user image"
class="img-circle" /> - You
</div>
</div>
<div class="chat-box-footer">
<div class="input-group">
<input type="text" class="form-control"
placeholder="Enter Text Here..." id="usermsg"> <span
class="input-group-btn">
<button class="btn btn-info" type="button" id="submitmsg">SEND</button>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="chat-box-new-div">
<div class="chat-box-new-head">Frequently Asked Questions ..
</div>
<div class="panel-body chat-box-new">
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<br /> <br /> <br />
</div>
</div>
</div>
</div>
<!-- USING SCRIPTS BELOW TO REDUCE THE LOAD TIME -->
<!-- CORE JQUERY SCRIPTS FILE -->
<script src="assets/js/jquery-1.11.1.js"></script>
<!-- CORE BOOTSTRAP SCRIPTS FILE -->
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
My CSS:
.hr-clas {
border-top: 1px solid #A12EB3;
}
.chat-box-main {
max-height:500px;
overflow:auto;
}
.chat-box-div {
border:2px solid #A12EB3;
border-bottom:2px solid #A12EB3;
}
.chat-box-head {
padding: 10px 15px;
border-bottom: 2px solid #A12EB3;
background-color: #B25AE5;
color: #fff;
text-align: center;
}
.chat-box-left {
width: 100%;
height: auto;
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
border: 1px solid #C5C5C5;
font-size:12px;
}
.chat-box-left:after {
top: 100%;
left: 10%;
border: solid transparent;
content: " ";
position: absolute;
border-top-color: #C5C5C5;
border-width: 15px;
margin-left: -15px;
}
.chat-box-name-left {
margin-top: 30px;
margin-left: 60px;
text-align:left;
color:#049E64;
}
.chat-box-name-left img {
max-width:40px;
border: 2px solid #049E64;
}
.chat-box-right {
width: 100%;
height: auto;
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
border: 1px solid #C5C5C5;
font-size:12px;
}
.chat-box-right:after {
top: 100%;
right: 10%;
border: solid transparent;
content: " ";
position: absolute;
border-top-color: #C5C5C5;
border-width: 15px;
margin-left: -15px;
}
.chat-box-name-right {
color: #354EA0;
margin-top: 30px;
margin-right: 60px;
text-align:right;
}
.chat-box-name-right img {
max-width:40px;
border: 2px solid #354EA0;
}
.chat-box-footer {
background-color: #D8D8D8;
padding: 10px;
}
please let me know how can I fix this.
Current issue Images.
when the page is loaded
After I send Hi as input
Thanks
解决方案
Given your description above something like the below should work (Very simplified)
<div id="chatContainer">
<div style="height:400px; overflow-y:auto;">
<!-- YOUR CHAT CONTENT GOES HERE -->
</div>
<textarea id="HaveYourSay"></textarea>
<button onclick="SendChat()">Send</button>
</div>
That will allow the contents of the div to reach a height of 400px before you get the scroll bar applied to the side.
Ive not used your HTML but have kept the example above simple so that you can apply it to your own app.
Check out the JS Fiddle : https://jsfiddle.net/6nep283h/1/
Note that I have used inline styles here for simplicity - I woudln't recommend using them in your app.
这篇关于如何修复div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
