이상한 html과 css 구조가 있습니다. 어떻게하면 채팅 메시지를 맨 아래에 맞출 수 있습니까?

과제에 대한 채팅 앱을 제작 중이며 거의 완료되었지만 채팅 상자의 텍스트가 하단에 정렬되지 않는 것 같습니다. 나는 vertical-align:bottom과 display:table-cell 및 display:block을 시도했지만 아무 소용이 없습니다.이상한 html과 css 구조가 있습니다. 어떻게하면 채팅 메시지를 맨 아래에 맞출 수 있습니까?

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

}

출처

2017-03-15 SolidSnake

. 부모 div에 상대적 위치 할당 #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

출처

2017-03-15 01:45:45 CreativeDip

감사합니다, 그것은 텍스트 - 근무 된 DIV와 CSS (등 - 디스플레이 = 테이블, 테이블 셀)로 테이블을 생성 정렬하지만 채팅 메시지 영역에 문제가 있습니다. 스크롤 막대가 오버플로되면 더 이상 존재하지 않습니다. 스크롤 바가 필요해. – SolidSnake

CSS Positioning Tutorial 링크가 업데이트되었습니다. – CreativeDip

을, 당신은 그것을 설정할 수 있습니다 바닥에 맞 춥니 다.

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>

출처

2017-03-15 01:47:30

감사합니다. user2111911 님의 답변과 같이 작동했습니다. 메시지가 오버플로되었을 때 스크롤 막대가 사라지는 문제는 무엇입니까? 내 임무를 위해 그게 필요해. 문제가 무엇입니까? 신장인가? #messageArea에서 100 %? – SolidSnake

답변을 업데이트했습니다. #messages 높이를 100 %로 설정하고 overflow : auto를 추가합니다. ~ #messages –

스크롤바가 돌아 왔지만 텍스트가 더 이상 하단에 정렬되지 않았습니다. 이 문제를 어떻게 해결할 수 있습니까? – SolidSnake

단지 (이것은 HTML에서 테이블을 사용하는 인간의 죄가 아닌) 일반 테이블 내부에 메시지를 넣어, 그것은 빠르고 간단하게하려면, 그것은 최선의 해결책은 아니지만을 당신의 과제가 완료됩니다.

어떤 이유로 당신이 <table> 태그를 사용할 수없는 경우, 다음

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

출처

2017-03-15 01:59:04 docliving

이상한 html과 css 구조가 있습니다. 어떻게하면 채팅 메시지를 맨 아래에 맞출 수 있습니까?

답변

관련 문제