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。

这是一个工作小提琴。

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

由于

Answer 1

你差不多了。您只需要在班级position:sticky中将位置更改为chat-form。为了更好看，您可能希望删除水平滚动条。你的CSS在下面的CSS类中有两处变化。请参阅此更新jsfiddle。

.chatbox {
    position: fixed;
    width: 80%;
    height: 85%;
    bottom: 0.5%;
    right: 1%;
    margin: 0 0 -1500px;
    background: white;
    overflow-y:auto;
    overflow-x:hidden;
}
.chat-form {
  position: sticky;
  /* bottom: 0px; */
  bottom: 0;
  /* margin-top: 4%; */
  display: flex;
  align-items: flex-start;
  width: 100%;
}

让我知道它是否有用。

Answer 2

将以下样式添加到chatBody类。

table.addPropertyChangeListener((evt) -> {
    if ("tableCellEditor".equals(evt.getPropertyName())) {
        if (table.isEditing()) {
            JTextField jtextField = (JTextField) ((DefaultCellEditor) table.getCellEditor()).getComponent();
            jtextField.setBorder(BorderFactory.createEmptyBorder(0, 0, 0, 0));
        }
    }
});

删除 `.chatBody { overflow: auto; height: 70%; margin-bottom: 50px; }` 来自chatBox。

希望这就是你的意思。

更新后的fiddle

滚动条正在移动整个div

2 个答案: