Question

我正在尝试创建一个浮动在网站右下角的聊天框。

但我的聊天框转到页面的底部，这是无法查看的这是我的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;">

我不知道哪个插件会更改正文标记。这可能是问题还是我错过了什么？

请帮助。感谢。

Answer 1

这可能会解决它..

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

VH是视口高度..所以它总是位于任何设备页面的底部！

如何创建一个浮动在右下角并且响应迅速的聊天框？

1 个答案: