html - 滚动条正在移动整个 div

Question

我正在编写一个将创建聊天窗口的 HTML 程序。

我有 3 个 div，在底部的 div 中我将输入文本，我的 HTML 如下所示。

<div class="chatbox" id="chatbox" style="margin: 0px;">
                <script src="https://sdk.amazonaws.com/js/aws-sdk-2.41.0.min.js"></script>
                <div class="chatHeader">
                    <span class="chat-text" style="text-align: center;">Chat with Care!!</span>
                    <div id="close-chat" onclick="closeChatbox()">×</div>
                    <div id="minim-chat" onclick="minimChatbox()" style="display: block;">
                        <span class="minim-button">−</span>
                    </div>
                    <div id="maxi-chat" onclick="loadChatbox()" style="display: none;">
                        <span class="maxi-button">+</span>
                    </div>
                </div>
                <div class="chatBody" style="margin-top:13%">
                    <ul id="ulid">
                        <li class="lexResponse">Hi I am CARE..Your Personal Assistant</li>
                    <li class="me">Hi THere</li><li class="lexResponse"><div>Sorry, can you please repeat that?</div></li><li class="me">H there</li><li class="lexResponse"><div>Sorry, can you please repeat that?</div></li><li class="me">start the fl;ow</li><li class="lexResponse"><div>what is your budget? is it very high, high, low or medium?</div></li><li class="me">Start the flow</li><li class="lexResponse"><div>what is your budget? is it very high, high, low or medium?</div></li></ul>
                </div>
                <form class="chat-form" onsubmit="return pushChat()">
                    <div class="backgroundColor">
                        <input type="text" id="textinput">
                    </div>
                </form>
            </div>

在这里，当我添加我的 CSS 时，我需要一个中心 div 的滚动条(我得到了这个)，但是当我滚动条时，底部的 div 也被移动了。

请让我知道如何将底部 div 固定到底部，并且滚动条只到中心 div。

这是一个可用的 fiddle 。

https://jsfiddle.net/g87mfLxa/1/

谢谢

Answer 1

将以下样式添加到 chatBody 类。

    `.chatBody {
      overflow: auto;
      height: 70%;
      margin-bottom: 50px;
     }`

删除 溢出:自动来自聊天框。

希望这就是你的意思。

更新的fiddle