div+css实现响应式自适应右下角聊天窗口效果代码-html代码-BFW代码库

代码语言：html
所属分类：响应式
代码描述：div+css实现响应式自适应右下角聊天窗口效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
#info {
  font-size: 20px;
}
#div_start {
  float: right;
}
#headline {
  text-decoration: none;
}
#results {
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #ddd;
  padding: 15px;
  text-align: left;
  min-height: 150px;
}
#start_button {
  border: 0;
  background-color: transparent;
  padding: 0;
  width: 30px !important;
  height: 30px !important;
}

#start_img {
  width: 30px !important;
  height: 30px !important;
}
.interim {
  color: gray;
}
.final {
  color: black;
  padding-right: 3px;
}
.button {
  display: none;
}
.marquee {
  margin: 20px auto;
}

#buttons {
  margin: 10px 0;
  position: relative;
  top: -50px;
}

#copy {
  margin-top: 20px;
}

#copy > div {
  display: none;
  margin: 0 70px;
}

.CarcodeWidgetResetContainer.MainContainer9e5 {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}
.CarcodeWidgetResetContainer.MainContainer--fixed65s {
  max-height: 100vh !important;
  width: 100% !important;
  height: calc(100% - 10px) !important;
}
@media (min-width: 480px) {
  .CarcodeWidgetResetContainer.MainContainer--fixed65s {
    width: 320px !important;
    height: 520px !important;
  }
}
@media (min-width: 1200px) {
  .CarcodeWidgetResetContainer.MainContainer--fixed65s {
    height: 550px !important;
  }
}
@media (min-width: 1800px) {
  .CarcodeWidgetResetContainer.MainContainer--fixed65s {
    height: 620px !important;
  }
}
.CarcodeWidgetResetContainer .VideoChatContainer-local2HJ {
  width: 20% !important;
}
@media (min-width: 1200px) {
  .CarcodeWidgetResetContainer .VideoChatContainer-local2HJ {
    width: 240px !important;
  }
}
.CarcodeWidgetResetContainer .PrivacyStatement--link254:hover {
  opacity: 0.8 !important;
}
.Form__fields198 > :not(:last-child) {
  margin-bottom: 8px !important;
}
.CarcodeWidgetResetContainer .InputActionButton1OE {
  padding: 8px 12px !important;
  transition: background-color 0.15s linear !important;
}
.CarcodeWidgetResetContainer .InputActionButton--roundedeeR {
  padding: 6px !important;
}
.CarcodeWidgetResetContainer .InputActionButton1OE svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
}
.CarcodeWidgetResetContainer .BaseInput__container2fc {
  transition: border 0.15s linear !important;
}
.CarcodeWidgetResetContainer .BaseInput-input2pX {
  padding: 0 16px !important;
  font-size: 14px !important;
}
.CarcodeWidgetResetContainer .BaseInput-input2pX,
.CarcodeWidgetResetContainer .BaseInput-input2pX:focus {
  background-color: transparent !important;
}
@media (max-width: 480px) {
  .CarcodeWidgetResetContainer .BaseInput-input2pX,
  .CarcodeWidgetResetContainer .BaseInput-input2pX:focus {
    font-size: 16px !important;
  }
}
.CarcodeWidgetResetContainer .BaseTextArea__container3xf {
  transition: border 0.15s linear !important;
}
.CarcodeWidgetResetContainer .BaseTextArea-textarea3ri {
  padding: 0 16px !important;
  font-size: 14px !important;
}
.CarcodeWidgetResetContainer .BaseTextArea-textarea3ri,
.CarcodeWidgetResetContainer .BaseTextArea-textarea3ri:focus {
  background-color: transparent !important;
}
@media (max-width: 480px) {
  .CarcodeWidgetResetContainer .BaseTextArea-textarea3ri,
  .CarcodeWidgetResetContainer .BaseTextArea-textarea3ri:focus {
    font-size: 16px !important;
  }
}
.CarcodeWidgetResetContainer .BaseTextArea-error1s7 {
  max-height: 0 !important;
}
.CarcodeWidgetResetContainer .BaseTextArea-error--show2SP {
  max-height: 150px !important;
}
.CarcodeWidgetResetContainer .Rating3cO :not(:last-child) {
  margin-right: 4px !important;
}
.CannedMessageArk {
  position: relative !important;
}
.CannedMessageArk:not(:last-child) {
  margin-right: 10px !important;
}
.CarcodeWidgetResetContainer .CannedMessages--CHECKBOX1W7 {
  display: inline-flex !important;
  flex-direction: column !important;
}
.CarcodeWidgetResetContainer .CannedMessages__wrapper--CHECKBOX2zL {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.DepartmentsSelector3vD > * {
  flex: 1 1 100% !important;
}
.CloseButton1e5:hover {
  transform: rotate(90deg) !important;
}
.FormHeader__titletIt > :first-child {
  margin-right: 10px !important;
}
.CarcodeWidgetContainer .ThanksMessageImage1RQ {
  animation: letter2Zm 1.8s ease-out !important;
}
@keyframes letter2Zm {
  0% {
    transform: translateX(-60%);
  }
  to {
    transform: translateX(0);
  }
}
.ModalActions3R_ > :not(:last-child) {
  margin-right: 8px !important;
}
.CarcodeWidgetResetContainer .MainSmsContainer--fixed2q3 {
  max-height: calc(100vh - 20px) !important;
}
@media (min-width: 480px) {
  .CarcodeWidgetResetContainer .MainSmsContainer--fixed2q3 {
    max-height: 520px !important;
  }
}
@media (min-width: 1200px) {
  .CarcodeWidgetResetContainer .MainSmsContainer--fixed2q3 {
    max-height: 550px !important;
  }
}
@media (min-width: 1800px) {
  .CarcodeWidgetResetContainer .MainSmsContainer--fixed2q3 {
    max-height: 620px !important;
  }
}
.CarcodeWidgetResetContainer .ArrowButton1gi {
  padding: 5px !important;
}
.CarcodeWidgetResetContainer .ArrowButton--collapsed6jl {
  padding: 0 !important;
}
.CarcodeWidgetResetContainer .IconButton1lZ {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
.CarcodeWidgetResetContainer .IconButton__content3J- {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 12px 10px 11px !important;
}
.CarcodeWidgetResetContainer .IconButton__separatorN80 {
  border-width: 0 0 0 1px !important;
  margin: 8px 0 !important;
}
.CarcodeWidgetResetContainer .IconButton__textMf_ {
  padding: 0 0 0 8px !important;
}
.CarcodeWidgetResetContainer .IconButton--column37r {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
.CarcodeWidgetResetContainer .IconButton--column37r .IconButton__content3J- {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
}
.CarcodeWidgetResetContainer .IconButton--column37r .IconButton__separatorN80 {
  border-width: 1px 0 0 !important;
  margin: 0 8px !important;
}
.CarcodeWidgetResetContainer .IconButton--column37r .IconButton__textMf_ {
  padding: 3px 0 0 !important;
}
.CarcodeWidgetResetContainer .HeaderX4y {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  flex-basis: 60px !important;
  justify-content: space-between !important;
  height: 60px !important;
}
.CarcodeWidgetResetContainer .Header--collapsed3a8 {
  flex-basis: 40px !important;
  height: 40px !important;
}
.CarcodeWidgetResetContainer .HeaderX4y > * {
  flex: 0 0 auto !important;
}
.CarcodeWidgetResetContainer .HeaderX4y .js-carcode-end-chat-button-container {
  position: absolute !important;
  top: 17px !important;
  right: 5px !important;
}
.CarcodeWidgetResetContainer
  .HeaderX4y
  .js-carcode-end-chat-button-container
  button {
  padding: 5px !important;
}
.CarcodeWidgetResetContainer .HeaderX4y .js-carcode-back-chat-button-container {
  top: 17px !important;
  left: 5px !important;
}
.CarcodeWidgetResetContainer
  .HeaderX4y
  .js-carcode-back-chat-button-container
  button {
  padding: 5px !important;
}
.CarcodeWidgetResetContainer
  .HeaderX4y
  .js-carcode-collapse-chat-button-container {
  position: absolute !important;
  top: 20px !important;
  right: 30px !important;
}
.CarcodeWidgetResetContainer
  .HeaderX4y
  .js-carcode-collapse-chat-button-container
  button {
  padding: 5px !important;
}
.CarcodeWidgetResetContainer
  .HeaderX4y
  .js-carcode-video-chat-button-container {
  position: absolute !important;
  top: 15px !important;
  right: 60px !important;
}
.CarcodeWidgetResetContainer
  .HeaderX4y
  .js-carcode-video-chat-button-container
  button {
  padding: 5px !important;
}
.SwipeIndicatoryLh i {
  transition: transform 0.1s linear !important;
}
.SwipeIndicatoryLh svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}
.SwipeIndicator--rotateI-N i {
  transition: none !important;
  animation: rotate3Io 1.1s infinite linear !important;
}
@keyframes rotate3Io {
  0% {
    transform: rotate(100deg);
  }
  to {
    transform: rotate(460deg);
  }
}
.Cardtnd p {
  line-height: 20px !important;
}
.CardDescription1IV p {
  line-height: 20px !important;
}
.CarcodeWidgetResetContainer .PiiForm2bL > :not(:last-child) {
  margin-bottom: 16px !important;
}
.TradeIn2HE > :not(:last-child) {
  margin-bottom: 8px !important;
}
.MessageText35b a {
  color: #f47821 !important;
}
.CarcodeWidgetResetContainer .ImageAttachment__image1Dg {
  opacity: 0.95 !important;
}
.CarcodeWidgetResetContainer .ImageAttachment__image1Dg:hover {
  opacity: 1 !important;
}
.CarcodeWidgetResetContainer .ImageAttachment__image1Dg:not(.is-loaded1Ia) {
  display: block !important;
  width: 185px !important;
}
.CarcodeWidgetResetContainer .FileAttachmentniz {
  text-align: center !important;
  font-size: 12px !important;
}
.CarcodeWidgetResetContainer .FileAttachment__contenteUo {
  text-decoration: none !important;
}
.CarcodeWidgetResetContainer .FileAttachment-titlesrv {
  overflow: hidden !important;
  width: 110px !important;
  font-size: 14px !important;
}
.CarcodeWidgetResetContainer .FileAttachment-icon2zG svg {
  width: 36px !important;
  height: 36px !important;
}
.CarcodeWidgetResetContainer .FileAttachment-linkpri {
  width: 100% !important;
  text-decoration: none !important;
  font-size: 12px !important;
}
.CarcodeWidgetContainer .VideoAttachment__video3BM {
  opacity: 0.95 !important;
}
.CarcodeWidgetContainer .VideoAttachment__video3BM:hover {
  opacity: 1 !important;
}
.CarcodeWidgetContainer .VideoAttachment__video3BM:not(.is-loaded1dF) {
  display: block !important;
  width: 185px !important;
}
.CarcodeWidgetContainer .VideoAttachment-icon18l {
  fill: #fff !important;
}
.CarcodeWidgetContainer .VideoAttachment-icon18l svg {
  width: 36px !important;
  height: 36px !important;
}
.CarcodeWidgetResetContainer .Attachment--audioo6t,
.CarcodeWidgetResetContainer .Attachment--fileKKS {
  box-sizing: border-box !important;
  width: 130px !important;
  padding: 10px !important;
  max-width: 130px !important;
}
.CarcodeWidgetResetContainer .Attachment--image1Jx {
  width: auto !important;
}
.CarcodeWidgetResetContainer .FullScreenAttachment__save-text3P5 {
  display: none !important;
}
@media (min-width: 480px) {
  .CarcodeWidgetResetContainer .FullScreenAttachment__save-text3P5 {
    display: block !important;
    margin-left: 10px !important;
  }
}
.CarcodeWidgetContainer .MessageInfo2EJ > * {
  font-size: 9px !important;
  line-height: 13px !important;
}
.MessageActionsP4O > :not(:last-child) {
  border-style: solid !important;
  border-right-width: 1px !important;
}
.CarcodeWidgetResetContainer .Message1hI {
  min-width: 80% !important;
  max-width: 80% !important;
}
.CarcodeWidgetResetContainer .Message__message-info--hidden1FZ {
  display: none !important;
}
.CarcodeWidgetResetContainer .Message__attachments3K0,
.CarcodeWidgetResetContainer .Message__inventoriesiEn {
  border-radius: 12px !important;
  overflow: hidden !important;
}
.CarcodeWidgetResetContainer .Message--inventory-cardsCTh {
  max-width: 100% !important;
  min-width: 100% !important;
}
.CarcodeWidgetResetContainer .Message--attachments1yI {
  min-width: 0 !important;
}
.CarcodeWidgetResetContainer .Message__bubbleDxX {
  border-radius: 12px !important;
}
.CarcodeWidgetResetContainer .Message__bubble--error37Z,
.CarcodeWidgetResetContainer .Message__bubble--greeting1Pa,
.CarcodeWidgetResetContainer .Message__bubble--pii-5r,
.CarcodeWidgetResetContainer .Message__bubble--reply3Y-,
.CarcodeWidgetResetContainer .Message__bubble--success3R6 {
  border-radius: 12px 12px 12px 0 !important;
}
.CarcodeWidgetResetContainer .Message__bubble--message3QP {
  border-radius: 12px 12px 0 12px !important;
}
.CarcodeWidgetResetContainer .Message__bubble--option3dq {
  margin: 2px 0 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
}
.CarcodeWidgetResetContainer .Message__bubbleDxX > :not(:last-child) {
  margin-bottom: 4px !important;
}
.CarcodeWidgetResetContainer .Message--errorVir,
.CarcodeWidgetResetContainer .Message--greeting2tv,
.CarcodeWidgetResetContainer .Message--pii1qs,
.CarcodeWidgetResetContainer .Message--replynCn,
.CarcodeWidgetResetContainer .Message--success32I {
  align-self: flex-start !important;
  text-align: left !important;
}
.CarcodeWidgetResetContainer .Message--option2lL {
  max-width: 90% !important;
  min-width: 0 !important;
  align-self: flex-end !important;
  text-align: center !important;
}
.CarcodeWidgetResetContainer .Message--pii1qs {
  max-width: 260px !important;
}
@media (max-width: 480px) {
  .CarcodeWidgetResetContainer .Message--pii1qs {
    max-width: 220px !important;
  }
}
.CarcodeWidgetResetContainer .Message--messageEDW {
  align-self: flex-end !important;
  text-align: right !important;
}
.CarcodeWidgetResetContainer .Message__attachments3K0 {
  padding: 6px !important;
}
.CarcodeWidgetResetContainer
  .Message__attachments3K0
  .message-attachment:not(:last-child) {
  margin-bottom: 4px !important;
}
.CarcodeWidgetResetContainer .Message__text1cB {
  display: inline-block !important;
  position: relative !important;
}
.CarcodeWidgetResetContainer .pending {
  margin-top: 4px !important;
  opacity: 0.75 !important;
}
.TranscriptEmailNtH > :not(:last-child) {
  margin-bottom: 16px !important;
}
.CarcodeWidgetResetContainer .LoadingIndicator2bl {
  position: relative !important;
}
.CarcodeWidgetResetContainer .LoadingIndicator2bl,
.CarcodeWidgetResetContainer .LoadingIndicator2bl:after,
.CarcodeWidgetResetContainer .LoadingIndicator2bl:before {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  animation-name: animationLoadingIndicator2kI !important;
  animation-duration: 1.2s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  border-radius: 100% !important;
  background-color: #999 !important;
}
.CarcodeWidgetResetContainer .LoadingIndicator2bl:before {
  position: absolute !important;
  top: 0 !important;
  right: -18px !important;
  content: "" !important;
  animation-delay: 0.4s !important;
  background-color: #bbb !important;
}
.CarcodeWidgetResetContainer .LoadingIndicator2bl:after {
  position: absolute !important;
  top: 0 !important;
  left: -18px !important;
  content: "" !important;
  animation-delay: 0.8s !important;
  background-color: #ddd !important;
}
@keyframes animationLoadingIndicator2kI {
  0% {
    background-color: #999;
  }
  to {
    background-color: #ddd;
  }
}
.CarcodeWidgetResetContainer .MessagesContainer1oF {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 150px !important;
}
.CarcodeWidgetResetContainer .MessagesContainer--loading1B- {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.CarcodeWidgetResetContainer .ListBoxItem3Dy {
  border: 1px solid transparent !important;
}
.CarcodeWidgetResetContainer .ListBoxItem3Dy:hover,
.CarcodeWidgetResetContainer .ListBoxItem3Dy[aria-selected="true"] {
  background: #fffcf7 !important;
  border-top: 1px solid #ccc !important;
  border-bottom: 1px solid #ccc !important;
}
.CarcodeWidgetResetContainer .ListBoxItem3Dy:first-child:hover,
.CarcodeWidgetResetContainer .ListBoxItem3Dy:first-child[aria-selected="true"] {
  border-top: 1px solid transparent !important;
}
.CarcodeWidgetResetContainer .ListBoxItem3Dy:last-child:hover,
.CarcodeWidgetResetContainer .ListBoxItem3Dy:last-child[aria-selected="true"] {
  border-bottom: 1px solid transparent !important;
}
.CarcodeWidgetResetContainer .ListBox3iq {
  max-height: 280px !important;
}
@media (max-height: 350px) {
  .CarcodeWidgetResetConta.........完整代码请登录后点击上方下载按钮下载查看