Question

我试图让我的网站更具响应性，一个问题就是聊天。如果我改变网站的高度聊天就在那里。解决这个问题的最佳方法是什么？我现在最好的选择是删除聊天上方的div，按钮是什么，然后calc会起作用，但问题是如果我改变高度它将从聊天开始改变（就像它必须）但我我很乐意改变它，所以它从social小组开始。

说清楚：如何通过保持高于div并从某个点开始更改它来修复调整聊天高度的大小，这次social panel。

＆＃13;

.col-md-4 {
  background-color: #e2e2e2;
  height: 100%;
}

.not-logged {
  text-align: center;
  margin-bottom: 25px;
}

.buttons {
  display: inline-block;
}

.login-button {
  width: 145px;
  height: 37px;
  background-color: #bf1c2d;
  float: left;
  border-radius: 5px;
  color: white;
  padding-top: 8px;
  cursor: pointer;
}

.register-button {
  width: 145px;
  height: 37px;
  background-color: #bf1c2d;
  float: left;
  border-radius: 5px;
  color: white;
  padding-top: 8px;
  cursor: pointer;
  margin-left: 25px;
}

a:hover {
  text-decoration: none;
  color: white;
}

.chat-info a {
  color: #bf1c2d;
}

.chat-info {
  display: inline-block;
  width: 100%;
  border-top: 3px solid #ccc;
}

.chat {
  height: calc(100vh - 180px);
  display: block;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 10px;
  margin-bottom: 0;
  max-height: 380px;
}

.chat-msg {
  padding: 3px 0px;
  background-color: #c3c3c3;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 35%, 62% 35%, 55% 0);
}

.chat-msg>div {
  margin-left: 10px;
}

.chat-msg>div>span {
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="screen" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row container">
  <div class="col-md-4">
    <div class="not-logged">
      <h4>To access the site</h4>
      <h4>Please <b>login</b> or <b>register</b></h4>
      <div class="buttons">
        <a class="login-button">Login</a>
        <a class="register-button">Register</a>
      </div>
    </div>
    <div class="chat-area">
      <div class="chat-info">
        <h4 style="float: right;">
          <span id="isonline">0</span> Online
        </h4>
        <h4><a href="#">Chat Rules</a></h4>
      </div>
      <div class="chat" id="chatArea"></div>
      <form id="chatForm">
        <input type="text" class="form-control" placeholder="Type here to chat..." id="chatMessage" maxlength="200">
      </form>
      <div class="social-info">
        <div class="social-header"></div>
        <div class="social-data" style="text-align: center;">
          <a href="#"><i class="fa fa-facebook-official fa-fw fa-2x"></i></a>
          <a href="#"><i class="fa fa-google-plus-official fa-fw fa-2x"></i></a>
          <a href="#"><i class="fa fa-twitter fa-fw fa-2x"></i></a>
          <br>
          <a href="#">Terms and Conditions</a> |
          <a href="#">F.A.Q.</a>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

这是小提琴：https://jsfiddle.net/hgjv6rLg/

P.S如果你是downvote，请告诉我一个理由，以便我可以改进我的职位。

从某一点改变聊天高度

0 个答案: