个人中心
gpt4 book ai didi

html - 如何固定div高度

转载 作者：行者123 更新时间：2023-11-28 10:32:17 28 4
gpt4 key购买 nike

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

我输入的是文本，这个是用来打rest call，得到response，然后添加到聊天窗口的。

目前我的问题是这样的，聊天窗口变大，页面随着聊天框(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;
}

请告诉我如何解决这个问题。

当前问题图像。

页面加载完成 enter image description here

在我发送 Hi 作为输入之后

enter image description here

谢谢

最佳答案

鉴于您上面的描述，下面的内容应该可以工作(非常简化)

<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 fiddle :https://jsfiddle.net/6nep283h/1/

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

关于html - 如何固定div高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41590390/

28 4 0
文章推荐： swift - 具有 String 表示形式的 Int 枚举
文章推荐： php - Jquery 错误？？两个数相乘后的长十进制数
文章推荐： JavaScript，iPhone : Repeat Action while Holding Button
文章推荐： javascript - 在 JavaScript 中访问数据网格单元格
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com