我正在为我的作业制作聊天应用程序，但我已经完成了，但我似乎无法将文字放在聊天框中以使底部对齐。我尝试过vertical-align:bottom和display:table-cell和display:block，但无济于事。
html
<body>
<div id="wrapper">
<!-- title of app -->
<div id = "title">
<h2>SENG 513 Chat</h2>
</div>
<!--username-->
<div id="usernameIndicator">
</div>
<div id ="currentOnline">
<p>Currently Online</p>
</div>
<!--chat messages and online users-->
<div id ="main">
<div id="messageArea">
<ul id="messages"></ul>
</div>
<div id ="clear">
</div>
<div id ="usernames">
</div>
</div>
<!--chat and message bar-->
<form action ="">
<input id="m" autocomplete="off"/>
<button>Send</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/client.js"></script>
</body>
CSS
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {
margin:0px; padding:0px;.
}
body{
font-family:helvetica;
}
#wrapper{
background-color:#3a6db7;
padding: 10px 30px 0px 30px;
margin:auto;
height:100%;
}
#title {
/*background-color:#4286f4;*/
text-align:center;
color:white;
}
#usernameIndicator h2
{
color:blue;
float:left;
width:90%;
}
#currentOnline{
}
#main
{
height:300px;
}
#messageArea{
width:90%;
height:100%;
background-color:#ffffff;
float:left;
overflow:auto;
display:block;
border: 1px solid;
}
#messages{
vertical-align:bottom;
display:table-cell;
}
#messages li {
padding: 5px 10px;
}
#messages li:nth-child(odd) {
background: #eee;
}
#usernames{
height:100%;
background-color:#e5e5e5;
border: 1px solid;
width:9%;
float:left;
overflow:auto;
}
#messagebarArea{
width:100%;
}
#form{
width:100%;
}
form input {
width:90%;
margin-top:20px;
margin-bottom:20px;
}
form button {
width: 9%;
background: rgb(130, 244, 255);
}
您需要使用位置来实现所需的目标。分配位置相对于父级#MessageArea而不是使用位置：绝对；底部：0;在#messages
#messageArea {
background-color: #ffffff;
border: 1px solid;
display: block;
float: left;
height: 100%;
overflow: auto;
position: relative;
width: 90%;
}
#messages {
bottom: 0;
display: table-cell;
position: absolute;
}
工作示例https://jsfiddle.net/z71dttg5/1/
您可以通过以下链接阅读有关CSS位置的更多信息：https://www.w3schools.com/css/css_positioning.asp
要使它快速而简单，只需将您的消息放入常规表中（在HTML中使用表不是致命的罪），这不是最好的解决方案，但它将得到您的作业完成。
如果由于某种原因无法使用<table>标签，请使用DIVS和CSS（display = table，table-cell等）创建表格
<div id="messageArea">
<table style="height:100%; width:100%">
<tr>
<td style="vertical-align:bottom;">
<ul id="messages">
<li>a</li>
<li>b</li>
</ul>
</td>
</tr>
</table>
</div>
如果将容器设置为绝对，则可以将其设置为对齐底部。
var button = document.getElementById("addMessage");
var list = document.getElementById("messages");
function addMessage() {
var message = "test message";
var item = document.createElement("li");
item.innerHTML = message;
list.appendChild(item);
//Scroll Bottom
list.scrollTop = list.scrollHeight;
}body, div, h1, h2, h3, h4, h5, h6, p, ul, img {
margin:0px; padding:0px;.
}
body{
font-family:helvetica;
}
#wrapper{
background-color:#3a6db7;
padding: 10px 30px 0px 30px;
margin:auto;
height:100%;
}
#title {
/*background-color:#4286f4;*/
text-align:center;
color:white;
}
#usernameIndicator h2
{
color:blue;
float:left;
width:90%;
}
#currentOnline{
}
#main
{
height:300px;
}
#messageArea{
width:90%;
height:100%;
background-color:#ffffff;
float:left;
overflow: auto;
display:block;
border: 1px solid;
position: relative;
}
#messages{
position: absolute;
max-height: 100%;
overflow: auto;
bottom: 0;
display:table-cell;
}
#messages li {
padding: 5px 10px;
}
#messages li:nth-child(odd) {
background: #eee;
}
#usernames{
height:100%;
background-color:#e5e5e5;
border: 1px solid;
width:9%;
float:left;
overflow:auto;
}
#messagebarArea{
width:100%;
}
#form{
width:100%;
}
form input {
width:90%;
margin-top:20px;
margin-bottom:20px;
}
form button {
width: 9%;
background: rgb(130, 244, 255);
}<body>
<div id="wrapper">
<!-- title of app -->
<div id = "title">
<h2>SENG 513 Chat</h2>
</div>
<!--username-->
<div id="usernameIndicator">
</div>
<div id ="currentOnline">
<p>Currently Online</p>
</div>
<!--chat messages and online users-->
<div id ="main">
<div id="messageArea">
<ul id="messages" tabindex="1">
<li>test3</li>
<li>test3</li>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
<div id ="clear">
</div>
<div id ="usernames">
</div>
</div>
<input type="button" onclick="addMessage()" id="addMessage" value="add message"/>
<!--chat and message bar-->
<form action ="">
<input id="m" autocomplete="off"/>
<button>Send</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/client.js"></script>
</body>