-1
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
position: absolute;
width: 100%;
height: 100%;
overflow: none;
margin-top: 0;
\t nargin-right: 0;
padding: 0;
\t overflow: hidden;
}
#cbox {
border: 1px black solid;
width: 99.0%;
height: 89.0%;
padding: 0;
\t margin: 0;
overflow-x: hidden;
overflow-y: auto;
}
.message {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-height: 50px;
max-height: 150px;
height: 50px;
width: 98.9%;
border: 1px black solid;
margin-top: 10px;
margin-left: 3px;
margin-bottom: 3px;
}
#snd-msg {
width: 97%;
height: calc(4% +50px);
overflow: hidden;
\t margin-bottom: 0px;
}
.pimg {
height: 45px;
width: 45px;
border: 1px black dashed;
margin-left: 3px;
margin-right: 3px;
margin-top: 2px;
margin-bottom: 2px;
vertical-align: middle;
}
.username {
margin-right: 3px;
margin-bottom: 2px;
text-decoration: underline;
}
.date {
_float: right;
float: right;
color: gray;
background-color: #dbdbdb;
font-family: monospace;
font-size: 8px;
margin-right: 10px;
}
.title {
\t height: 150px;
width: 100%;
margin-left: 5px;
\t font-size: 10px;
}
\t .ctext { font-family: monospace; font-size: 9px; font-weight: 600; color: blue; float: right; _float: right; margin-right: 18px;}<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<div class="container">
<span class="title" id="title">Room Title</span>
<div id="cbox">
<div class="message">
<img class="pimg" src="https://otku.ga/images/tink.jpg"><span class="date">7/28/2017 - 4:0:34</span><span><span class="username" style="">tink</span><span class="text" style="font-size: 12px; font-family: monospace;">Donec orci metus, tempor et luctus ut, convallis non dui. Quisque mattis quis nulla quis laoreet. Morbi rutrum diam tellus, in volutpat nunc facilisis vitae. Nullam vitae ornare est, non congue turpis. Donec vel vehicula dolor, ut commodo enim. Donec sollicitudin nisi mi, vel facilisis quam aliquet faucibus. Vivamus venenatis laoreet lacus, ornare elementum nisl eleifend et. Fusce viverra vel purus quis ultricies. Nunc tempus dignissim ligula et condimentum. In ut dignissim urna, nec feugiat mi. Maecenas rutrum ipsum eget lacus suscipit, sit amet interdum nibh placerat. </span></span>
</div>
<span class="ctext">People: <span id="count">0</span></span>
<input type="text" id="snd-msg" placeholder="Enter a message.." />
</div>對於生活，我的生活我無法弄清楚如何解決這個問題。我想要做的是讓這個聊天完全響應。但是，正如你可以看到它的一點點硬，我想截斷消息在150px最大保持一切對齊的例子什麼東西看起來是正確的在這裏https://otku.ga/chat.html?room=examplegroup
更改一些CSS和HTML部分檢查我的答案。 – LKG