我有一個奇怪的HTML和CSS結構，如何使聊天消息與底部對齊？

Question

我正在為自己的任務開發一個聊天應用程序，我差不多完成了，但是我似乎無法使聊天框中的文本在底部對齊。 我嘗試了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); 

}

Answer 1

您需要利用職位來實現所需的目標。 將相對位置分配給父div #messageArea比Use position：absolute; 底部：0; 在＃消息上

#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

Answer 2

如果將容器設置為絕對容器，則可以將其設置為與底部對齊。

 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>

Answer 3

為了使它變得快速和簡單，只需將您的消息放在一個常規表中（使用HTML中的表並不是致命的錯誤），它不是最佳解決方案，但可以完成您的任務。

如果由於某種原因您不能使用<table>標簽，則使用DIV和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>

我有一個奇怪的HTML和CSS結構，如何使聊天消息與底部對齊？

問題描述

3 個解決方案

解決方案1
0 2017-03-15 01:45:45

解決方案2
0 2017-03-15 01:47:30

解決方案3
0 2017-03-15 01:59:04

我有一個奇怪的HTML和CSS結構，如何使聊天消息與底部對齊？

問題描述

3 個解決方案

解決方案1 0 2017-03-15 01:45:45

解決方案2 0 2017-03-15 01:47:30

解決方案3 0 2017-03-15 01:59:04

解決方案1
0 2017-03-15 01:45:45

解決方案2
0 2017-03-15 01:47:30

解決方案3
0 2017-03-15 01:59:04