Question

我正在开发一个聊天控制应用，我的问题是这样的。

我输入文本，用于进行休息呼叫，获取响应，并将其添加到聊天窗口。

目前我的问题是这样，聊天窗口变得更大，页面随着聊天框（div）一起滚动。有人可以告诉我如何在整个页面中停止此增量。

简单来说，我的要求是聊天窗口的初始高度为X，用户会询问查询，响应会进入聊天窗口，用户会问另一个，同样的事情会发生，但是页面不应该滚动，而应该是聊天窗口（这已经在我的代码中发生了。）

以下是我的代码。

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

我的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;
}

请告诉我如何解决此问题。

当前问题图片。

加载页面时

我发送Hi作为输入后

由于

Answer 1

鉴于上面的描述，下面的内容应该有效（非常简化）

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

这样，在将滚动条应用到侧面之前，div的内容将达到400px的高度。

我没有使用过您的HTML，但保留了上面的示例，以便您可以将其应用到自己的应用中。

查看JS小提琴：https://jsfiddle.net/6nep283h/1/

请注意，为了简单起见，我在这里使用了内联样式 - 我不推荐在您的应用中使用它们。

Answer 2

用以下内容替换您的课程

      .chat-box-div {
        border:2px solid #A12EB3;
        border-bottom:2px solid #A12EB3;
        max-height:400px ;
    }

Answer 3

为门户网站试用此代码

.chat-box-main{
     height:200px;
     overflow-y:scroll;
}

Answer 4

试试这个

.chat-box-main {
  max-height: 500px;
  overflow-y:scroll;
}

如何修复div高度

4 个答案: