Question

我正在尝试使用Css构建响应式聊天模板。以下是我想要实现的目标 1.）我希望聊天模板能够快速响应，以便它能自动适应任何桌面设备的屏幕

2.）左侧消息，右侧消息和中心消息的滚动条不起作用。

3.）我想给聊天标题/ Chatboard高度10％，页脚10％，左边消息div 20％宽度，右边消息20％宽度，中心消息将占用剩余的60％宽度。

以下代码显示了我迄今为止的努力。有人可以帮我解决这个问题。

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #009DA5;
}

.container {
  /*background:black;*/
  margin: 0 auto;
  height: 450px;
  width: 100%;
  height: 100%;
  /*top:0px;*/
}

.chat-header {
  width: 98%;
  height: 50px;
  line-height: 50px;
  background-color: #273c57;
  color: #fff;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  /*top:0px;*/
}

#chat-body {
  /*display: none;*/
}

.message-left {
  float: left;
  width: 20%;
  height: 100%;
  background-color: #F94D4D;
  /*position:fixed;*/
  overflow-y: scroll;
}

.message-right {
  float: right;
  width: 20%;
  height: 100%;
  background-color: green;
  /*position:fixed;*/
  overflow-y: scroll;
}

.message-center {
  position: relative;
  float: left;
  width: 60%;
  height: 100%;
  background-color: blue;
  top: 0px;
  overflow-y: scroll;
}

footer {
  width: 100%;
  font: normal 16px Arial, Helvetica, sans-serif;
  padding: 6px 18px;
  position: fixed;
  bottom: 0;
  background-color: orange;
  color: purple;
  z-index: 1;
  text-align: center;
}

footer a {
  color: #fff;
  text-decoration: none;
}

<div class="container">
   <div id="chat-body">
      <div class="chat-header">
         <span>chat Board</span>
      </div>
      <div class="message-left">
         <ul>
            left message<br><br><br>left message<br><br><br>left message<br><br><br>left message<br><br><br>left message<br><br><br>v left message<br><br><br>left message<br><br><br>left message<br><br><br>left message<br><br><br>left message<br><br><br>left
            message<br><br><br>left message<br><br><br>
         </ul>
      </div>
      <div class="message-right">
         <ul>
            right message<br><br><br>right message<br><br><br>right message<br><br><br>right message<br><br><br>right message<br><br><br>right message<br><br><br> right message<br><br><br>right message<br><br><br>right message<br><br><br>
            <br><br>right message<br><br><br>right message<br><br><br><br><br>right message<br><br><br>right message<br><br><br>
         </ul>
      </div>
      <div class="message-center">
         <div style="background:black;color:white;height:50px;postion:fixed">Rooms Names</div>
         <ul>
            main message<br><br><br>main message<br><br><br>main message<br><br><br>main message<br><br><br>main message
            <br><br><br>main message
            <br><br><br>main message<br><br><br>main message
            <br><br><br>main message
            <br><br><br>main message
            <br><br><br>main message
            <br><br><br>main message
            <br><br><br>main message
            <br><br><br>main message
         </ul>
      </div>
   </div>
</div>
<footer>
   My footer is here
</footer>
</div>

Answer 1

Flexbox使这样的布局变得简单且可配置。您可以混合弹性行和列来构建每个部分，在需要时应用溢出，高度和弹性增长。

这里是对flexbox的一个很好的参考。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

＆＃13;

* {margin:0;padding:0;box-sizing:border-box;}

#chat-body {
  height: 100vh;
}

#chat-body, .message-center {
  display: flex;
  flex-direction: column;
}

.chat-header, footer {
  height: 10%;
}

.main, .message-center, .messages {
  flex: 1 0 0;
}

.main {
  display: flex;
}

.main > div:not(.message-center), .messages {
  overflow: auto;
}

.message-left, .message-right {
  width: 20%;
}

.names {
  height: 10%;
  background: #000;
  text-align: center;
  color: white;
}

＆＃13;

<div id="chat-body">
  <div class="chat-header">
    <span>chat Board</span>
  </div>
  <div class="main">
    <div class="message-left">
      <ul>
        left message<br><br><br>left message<br><br><br>left message<br><br><br>left message<br><br><br>left message<br><br><br>v left message<br><br><br>left message<br><br><br>left message<br><br><br>left message<br><br><br>left message<br><br><br>left
        message
        <br><br><br>left message<br><br><br>
      </ul>
    </div>

    <div class="message-center">
      <div class="names">Rooms Names</div>
      <ul class="messages">
        main message<br><br><br>main message<br><br><br>main message<br><br><br>main message<br><br><br>main message
        <br><br><br>main message
        <br><br><br>main message<br><br><br>main message
        <br><br><br>main message
        <br><br><br>main message
        <br><br><br>main message
        <br><br><br>main message
        <br><br><br>main message
        <br><br><br>main message
      </ul>
    </div>

    <div class="message-right">
      <ul>
        right message<br><br><br>right message<br><br><br>right message<br><br><br>right message<br><br><br>right message<br><br><br>right message<br><br><br> right message<br><br><br>right message<br><br><br>right message<br><br><br>
        <br><br>right message<br><br><br>right message<br><br><br><br><br>right message<br><br><br>right message<br><br><br>
      </ul>
    </div>

  </div>
  <footer>
    My footer is here
  </footer>
</div>

＆＃13;

桌面响应聊天板使用CSS

1 个答案: