个人中心
gpt4 book ai didi

html - 聊天网页设计中的滚动问题

转载 作者：行者123 更新时间：2023-11-28 04:35:03 25 4
gpt4 key购买 nike

我在聊天网站中遇到滚动问题。底部滚动条不可见且滚动在实时聊天中不起作用。

@charset "utf-8";

/* CSS Document */

html,
body {
  font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
  line-height: 20px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  height: 100%;
}
.inner {
  max-width: 100%;
  padding: 0 20px;
}
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 {
  display: block;
  position: relative;
  float: left;
  width: 100%
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
header {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
  min-height: 60px;
}
header:after {
  clear: both;
  content: '';
  display: table;
}
header nav {
  position: relative;
  padding: 20px;
}
.credit {
  position: absolute;
  top: 0;
  right: 40px;
  color: #fff;
  text-align: right;
  text-transform: capitalize;
  font-weight: 700;
}
.credit i {
  position: absolute;
  top: 26px;
  padding-left: 20px;
}
.credit p {
  margin: 10px 0 0 0;
  padding: 0;
}
.trigger {
  display: inline-block;
  cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
  width: 28px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}
/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-4px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}
/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
.col-3:after {
  content: '';
  clear: both;
  display: block;
}
.logo a {
  position: absolute;
  top: 26px;
  left: 80px;
  font-size: 28px;
  display: block;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}
.bets,
.video,
.chat {
  position: relative;
  overflow-y: scroll;
  height: 100%;
  z-index: 1;
  background: #191919;
}
.PB15 {
  padding: 15px 15px 15px 30px;
}
.section {
  position: relative;
  height: 100%;
  width: 100%;
  padding-top: 78px;
}
.PB80 {
  padding-bottom: 78px;
}
.bets-title {
  background: #282828;
  padding: 15px 15px 15px 45px;
  color: #fff;
  line-height: 15px;
}
.bets-title span {
  padding-left: 15px;
  font-weight: 600;
}
.video {
  background: #222222;
}
.video .video-content {
  padding: 20px 10px 30px 60px;
}
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: scroll;
}
.video-title {
  list-style: none;
  color: #fff;
  margin: 0;
  padding: 0;
}
.video-title li {
  display: inline-block;
}
.video-title li:first-child {
  font-size: 20px;
  font-weight: 700;
}
.video-title li:last-child {
  color: rgba(159, 159, 159, 1.00);
  position: absolute;
  right: 0;
  margin-right: 20px;
}
.list {
  list-style: none;
  margin: 0;
  padding: 10px 0 0 0;
}
.video h3 {
  color: #fff;
}
.list li {
  display: inline-block;
  color: #fff;
}
.list span {
  padding: 0 20px 0 10px;
  color: rgba(159, 159, 159, 1.00);
}
.max-100 {
  display: block;
  max-width: 100%;
}
.chat .bets-title {
  margin-bottom: 10px;
}
.container {
  padding: 20px 0 0 20px;
}
.users {
  position: relative;
  margin-bottom: 15px;
  display: flex;
}
.users img {
  width: 30px;
  height: 30px;
  max-width: 100%;
}
.username {
  color: #a7a7a7;
  font-weight: 600;
}
.users .user-msg {
  color: #fff;
  padding: 0 20px;
}
.users span:last-child {
  padding-left: 10px;
}
.col-1 {
  width: 8.33333333333%
}
.col-2 {
  width: 16.6666666667%
}
.col-3 {
  width: 25%
}
.col-4 {
  width: 33.3333333333%
}
.col-5 {
  width: 41.6666666667%
}
.col-6 {
  width: 50%
}
.col-7 {
  width: 58.3333333333%
}
.col-8 {
  width: 66.6666666667%
}
.col-9 {
  width: 75%
}
.col-10 {
  width: 83.3333333333%
}
.col-11 {
  width: 91.6666666667%
}
.col-12 {
  width: 100%
}
@media (min-width: 768px) {
  .col-3 {
    width: 100%;
  }
  .col-6 {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .col-1 {
    width: 8.33333333333%
  }
  .col-2 {
    width: 16.6666666667%
  }
  .col-3 {
    width: 25%
  }
  .col-4 {
    width: 33.3333333333%
  }
  .col-5 {
    width: 41.6666666667%
  }
  .col-6 {
    width: 50%
  }
  .col-7 {
    width: 58.3333333333%
  }
  .col-8 {
    width: 66.6666666667%
  }
  .col-9 {
    width: 75%
  }
  .col-10 {
    width: 83.3333333333%
  }
  .col-11 {
    width: 91.6666666667%
  }
  .col-12 {
    width: 100%
  }
}
<!doctype html>
<html>

<head>
 
  <meta charset="utf-8">
  <title>Live Chat</title>
</head>

<body>
  <header>
    <div class="inner">
      <nav>
        <div class="trigger" onclick="myFunction(this)">
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
        </div>
        <div class="logo"><a href="index.html">Chat</a>
        </div>
        <div class="credit">
          <p>Credtis available</p>
          <p>23,000</p>
          <i class="fa fa-user-circle"></i> 
        </div>
      </nav>
    </div>
  </header>
  <div class="section">

    <div class="col-3">
      <div class="bets-title">
        <i class="fa fa-angle-right"></i>  <span>Live Bets</span> 
      </div>
      <div class="bets">
      </div>
      <div class="PB80"></div>
    </div>

    <div class="col-6 video">
      <div class="video-contents">
        <video width="100%" height="100%" controls>
          <source src="demo.mp4" type="video/mp4"></source>
          Your browser does not support the video tag.
        </video>
        <div class="video-content">
          <ul class="video-title">
            <li>The Mighty Scrpio VS Legacy Prime Mantis</li>
            <li>1,548 watching now</li>
          </ul>
          <ul class="list">
            <li><i class="fa fa-thumbs-o-up"></i><span>2.8k</span>
            </li>
            <li><i class="fa fa-thumbs-o-down"><span>112</span></i>
            </li>
            <li><i class="fa fa-reply"></i>
            </li>
          </ul>
          <h3>Current Best Total: 13,000 credits</h3> 
        </div>
      </div>
      <div class="video-contents">
        <video width="100%" height="100%" controls>
          <source src="demo.mp4" type="video/mp4"></source>
          Your browser does not support the video tag.
        </video>
        <div class="video-content">
          <ul class="video-title">
            <li>The Mighty Scrpio VS Legacy Prime Mantis</li>
            <li>1,548 watching now</li>
          </ul>
          <ul class="list">
            <li><i class="fa fa-thumbs-o-up"></i><span>2.8k</span>
            </li>
            <li><i class="fa fa-thumbs-o-down"><span>112</span></i>
            </li>
            <li><i class="fa fa-reply"></i>
            </li>
          </ul>
          <h3>Current Best Total: 13,000 credits</h3> 
        </div>
      </div>
      <div class="video-contents">
        <video width="100%" height="100%" controls>
          <source src="demo.mp4" type="video/mp4"></source>
          Your browser does not support the video tag.
        </video>
        <div class="video-content">
          <ul class="video-title">
            <li>The Mighty Scrpio VS Legacy Prime Mantis</li>
            <li>1,548 watching now</li>
          </ul>
          <ul class="list">
            <li><i class="fa fa-thumbs-o-up"></i><span>2.8k</span>
            </li>
            <li><i class="fa fa-thumbs-o-down"><span>112</span></i>
            </li>
            <li><i class="fa fa-reply"></i>
            </li>
          </ul>
          <h3>Current Best Total: 13,000 credits</h3> 
        </div>
      </div>
      <div class="PB80"></div>
    </div>

    <div class="col-3">
      <div class="bets-title">
        <i class="fa fa-angle-right"></i>  <span>Live Chat</span> 
      </div>
      <div class="chat PB15">
        <div class="users">              
          <div class="user-msg">
            <span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
          </div>
        </div>
        <div class="users">            
          <div class="user-msg">
            <span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
          </div>
        </div>
        <div class="users">
          <div class="user-msg">
            <span class="username">Abhijeet</span><span>Lorem ipsum</span>
          </div>
        </div>
        <div class="users">
          <div class="user-msg">
            <span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
          </div>
        </div>
        <div class="users">
          <div class="user-msg">
            <span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
          </div>
        </div>
        <div class="users">
          <div class="user-msg">
            <span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
          </div>
        </div>
        <div class="users">
          <div class="user-msg">
            <span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
          </div>
        </div>
        <div class="users">
          <div class="user-msg">
            <span class="username">Abhijeet</span><span>Lorem ipsum</span>
          </div>
        </div>
        <div class="users">
          <div class="user-msg">
            <span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
          </div>
        </div>
        <div class="users">
          <div class="user-msg">
            <span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
          </div>
        </div>
        <div class="users">
          <div class="user-msg">
            <span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
          </div>
        </div>
        <div class="users">
          <div class="user-msg">
            <span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
          </div>
        </div>
        <div class="users">
          <div class="user-msg">
            <span class="username">Abhijeet</span><span>Lorem ipsum</span>
          </div>
        </div>
        <div class="users">
          <div class="user-msg">
            <span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
          </div>
        </div>
        <div class="users">
          <div class="user-msg">
            <span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
          </div>
        </div>
        <div class="PB80"></div>
      </div>
    </div>
  </div>     
</body>

</html>

最佳答案

您的聊天 类分配给了错误的 block 。你有 col-6 video block 。在那之下，你有类 col-3 的 block 来包装你的聊天 html。只需给他你的特殊类(class)聊天，一切都会正常进行

关于html - 聊天网页设计中的滚动问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41531083/

25 4 0
文章推荐： html - 导航栏未在 Bootstrap Material 中扩展
文章推荐： C++ Qt QPixmap 加载总是返回 false
文章推荐： c++ - 类模板的 constexpr 运算符重载
文章推荐： c++ - mmap的简明指针算法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com