CSSを使用したデスクトップレスポンシブルチャットボード

Question

Cssを使用してレスポンシブなチャットテンプレートを作成しようとしています。 以下は右、私はそれが自動的に残されたメッセージの両方に任意のデスクトップデバイス

2）スクロールバーの画面に収まるするようにチャットテンプレートが応答するようにしたい） 1を達成しようとしていますものですメッセージとセンターメッセージが機能していません。

3.）チャットヘッダー/チャットボードの高さを10％、フッター10％、左のメッセージdiv20％の幅、右のメッセージ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

フレキシボックスには、この簡単で、非常に設定可能なようなレイアウトになります。フレックスの行と列を混在させて、各セクションを作成し、オーバーフロー、高さを適用し、必要に応じてフレックス成長させることができます。

フレックスボックスの参考になります。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

* {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; 
 
}

<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>