gpt4 book ai didi

jquery - 如何创建一个 float 在右下角且响应迅速的聊天框?

转载 作者:行者123 更新时间:2023-11-28 16:14:08 26 4
gpt4 key购买 nike

我正在尝试创建一个 float 在网站右下角的聊天框,如下所示。 enter image description here

但是我的聊天框转到了页面的底部,这是不可见的。
这是我的 scss

.g_chat { 
width: 300px;
position: absolute;
right: 0;
bottom: 0;
border: 1px solid black;

&.collapsed { // window collapse
height: auto;
.g_chat_inner {
display: none;
}
}

.g_chat_toggler { // button to hide/show chat box
cursor: pointer;
}

form { // form to submit message
margin-top: 30px;
}

#messages { // all messages here
max-height: 500px;
overflow-y: auto;
.message {
margin-bottom: 10px;
&:last-of-type {
margin-bottom: 0;
}
}
}
}

当我检查我的页面时,我看到 <body>标签正在更改为

<body style="position: relative; min-height: 100%; top: 0px;">

我不知道哪个插件改变了body标签。这可能是问题所在还是我遗漏了什么?

请帮忙。谢谢。

最佳答案

这可能会解决它..

.g_chat{
position: fixed;
top: 100vh;
}

VH 是视口(viewport)高度..所以它总是在任何设备上的页面底部!

关于jquery - 如何创建一个 float 在右下角且响应迅速的聊天框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37827731/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com