Question

我正在使用Bootstrap构建应用程序。

面板会自动增长，因此用户必须向下滚动浏览器窗口，我不希望这种情况发生。

以下是目前的情况：

我希望聊天面板成为浏览器的完整高度，因此输入框和发送按钮位于浏览器的底部，我希望用户列表仅增长到当前浏览器窗口大小，并且然后在其中滚动。

是否可以使用CSS？

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-body">
          <strong>Room:</strong> <span id="channel"></span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-10">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Chat</h3>
        </div>
        <div class="panel-body">
          <ul id="messages"></ul>
          <form id="chat">
            <div class="input-group">
              <input type="text" class="form-control" id="chat-input" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-primary">Send</button>
              </span>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Users</h3>
        </div>
        <div class="panel-body">
          <div class="list-group" id="users"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

点击按钮，即可生成内容。您也可以输入和发送内容。聊天窗口有它自己的滚动条。使用全屏预览。此外，因为我使用scrollTop()，它总是滚动到最后一条消息。

<强>段

＆＃13;

$(function () {
  var sendChat = function () {
    $(".input-area .chat-area ul").append(($(".message-box").html().length) ? '<li style="display: none;" class="just-inserted">' + $(".message-box").html() + '</li>' : '<li style="display: none;" class="just-inserted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto optio culpa eum, hic recusandae temporibus earum consequatur laudantium esse itaque unde, vero! Sunt delectus debitis, alias reiciendis necessitatibus consectetur voluptatem.</li>');
    $(".message-box").html("");
    $(".input-area .chat-area ul li.just-inserted").slideDown(function () {
      $(".input-area .chat-area").scrollTop($(".input-area .chat-area ul").height());
      $(this).addClass("next-insert");
      setTimeout(function () {
        $(".next-insert").removeClass("next-insert just-inserted");
      }, 500);
    });
  };
  $(".input-area button").click(sendChat);
  $(".message-box").keydown(function (e) {
    if (e.keyCode == 13)
      sendChat();
  });
});

＆＃13;

* {box-sizing: border-box; margin: 0; padding: 0; list-style: none; font-family: Segoe UI;}
.input-area {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; padding: 15px 350px 15px 15px;}
.input-area .message-box {border: 1px solid #999; margin: 10px 0; padding: 5px;}
.input-area button {padding: 3px 15px; cursor: pointer;}

.input-area .chat-area {position: absolute; right: 0; top: 0; bottom: 10px; width: 325px; border: 1px solid #999; margin: 10px 10px 0; padding: 10px; overflow: auto;}

.input-area .chat-area ul li {margin: 5px; padding: 5px; border: 1px solid #999; transition: background-color 0.5s ease;}

.just-inserted {background: #ccc;}
.next-inserted {background: #999; color: #fff;}

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="input-area">
  <p>Enter Message Here</p>
  <div contenteditable class="message-box"></div>
  <button>Send</button>
  <div class="chat-area">
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto optio culpa eum, hic recusandae temporibus earum consequatur laudantium esse itaque unde, vero! Sunt delectus debitis, alias reiciendis necessitatibus consectetur voluptatem.</li>
    </ul>
  </div>
</div>

＆＃13;

您也可以淡出已经发布的新消息。试一试。

Answer 2

是的，这是可能的。你可以强迫聊天和用户div拥有自己的卷轴。

＆＃13;

html,
body {
  margin: 0;
  height: 100%;
}
.chat {
  position: relative;
  float: left;
  width: 70%;
  height: 100%;
  overflow: auto;
  background: #ccc;
}
.users {
  position: relative;
  float: right;
  width: 30%;
  height: 100%;
  overflow: auto;
  background: #f00;
}
.tempHeight {
  width: 100px;
  height: 2000px;
}

＆＃13;

<div class="chat">
  <div class="tempHeight">Chat</div>
</div>
<div class="users">
  <div class="tempHeight">User list</div>
</div>

＆＃13;

Answer 3

如果不了解更多标记，我只能发布一些帮助

当我希望事物成为全高时，我将页面设置为首先知道

html,body {
    height:100%;
}

然后元素（如果它们是身体的直接孩子）可以使用此

.chat {
    height:100%; /* You may have to use some more appropriate working out here with the help of calc() maybe */
    overflow: auto /* this will allow the scroll to happen in element not in window */
}

这将使用类似于此

的标记

<html>

<body>
    <div class="chat">
    This is the chat
    </div>
</body>
</html>

使用CSS阻止页面滚动

3 个答案: