내 css 및 html이 매우 이상하게 구성되어 있습니다. 어떻게 채팅 창 크기를 브라우저와 함께 조절할 수 있습니까?

저는 채팅 서버로 과제를 완료했습니다. 대부분의 핵심 기능을 수행했습니다. 그 중 하나가 여러분 덕분입니다. 나는 단지 하나 더 작은 것을 필요로하고 그것을하는 방법을 너무 확신하지 못합니다.내 css 및 html이 매우 이상하게 구성되어 있습니다. 어떻게 채팅 창 크기를 브라우저와 함께 조절할 수 있습니까?

채팅 내용을 브라우저에서 크기를 조정할 수 있도록 만들어야합니다. 지금까지는 가로로 크기를 조정하지만 세로로 크기는 조정하지 않습니다. 나는 모든 높이를 백분율로 설정하려했지만 창과 함께 크기가 조정되지 않았습니다.

최대화되면 창 전체를 채우고 창을 축소하면 모든 것이 줄어 듭니다. 모든 것을 상대적으로 모아서 창 크기를 조정하고 싶습니다. 어떻게해야합니까? 감사.

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><b>Currently Online</b></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 당신이 페이지 높이로 확장해야 백분율로 #main 설정하면

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 { 
    text-align:center; 
    color:#e8bf2e; 
    font-family:arial; 
    font-size:20px; 
} 

#usernameIndicator h2 
{ 
    color:#e8842e; 
    float:left; 
    width:90%; 
    text-decoration: underline; 
} 

#currentOnline{ 
} 

#main 
{ 
    height:500px; 

} 

#messageArea{ 
    width:90%; 
    height:100%; 
    background-color:#ffffff; 
    float:left; 
    overflow:auto; 
    border: 1px solid; 
    position: relative; 
    border-radius:5px; 
} 

#messages{ 
    width:100%; 
    position: absolute; 
    bottom: 0px; 

    max-height:100%; 



} 

#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; 
    border-radius:5px; 
} 

#messagebarArea{ 
    width:100%; 
} 
#form{ 
    width:100%; 


} 

form input { 
    width:90%; 
    margin-top:20px; 
    margin-bottom:20px; 
    border-radius:5px; 

} 

form button { 
    width: 9%; 
    background: rgb(130, 244, 255); 
    border-radius:5px; 
}

출처

2017-03-15 SolidSnake

. 지금은 500px에서 높이를 제한하는 것으로 보입니다. 추가로 500px를 최소 높이로 설정하여 작은 창 크기에서 계속 볼 수 있습니다. 이것

출처

2017-03-15 03:41:21

안녕하세요, Adam again LOL. #main 높이를 그냥 백분율로했지만, 채팅 메시지 영역과 버튼을 지나서 창을 끌어 올 때, 나와 크기를 조정하지 않습니다. 그냥 숨 깁니다. – SolidSnake

모두 괜찮습니다. 사소한 기능이었습니다. 나는 과제를 제출했다. 감사. – SolidSnake

봐 :

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:100vh; 
 
} 
 
#title { 
 
    text-align:center; 
 
    color:#e8bf2e; 
 
    font-family:arial; 
 
    font-size:20px; 
 
} 
 

 
#usernameIndicator h2 
 
{ 
 
    color:#e8842e; 
 
    float:left; 
 
    width:90%; 
 
    text-decoration: underline; 
 
} 
 

 
#currentOnline{ 
 
} 
 

 
#main 
 
{ 
 
    height:calc(100vh - 150px); 
 

 
} 
 

 
#messageArea{ 
 
    width:90%; 
 
    height:100%; 
 
    background-color:#ffffff; 
 
    float:left; 
 
    overflow:auto; 
 
    border: 1px solid; 
 
    position: relative; 
 
    border-radius:5px; 
 
} 
 

 
#messages{ 
 
    width:100%; 
 
    position: absolute; 
 
    bottom: 0px; 
 

 
    max-height:100%; 
 

 

 

 
} 
 

 
#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; 
 
    border-radius:5px; 
 
} 
 

 
#messagebarArea{ 
 
    width:100%; 
 
} 
 
#form{ 
 
    width:100%; 
 

 

 
} 
 

 
form input { 
 
    width:90%; 
 
    margin-top:20px; 
 
    margin-bottom:20px; 
 
    border-radius:5px; 
 

 
} 
 

 
form button { 
 
    width: 9%; 
 
    background: rgb(130, 244, 255); 
 
    border-radius:5px; 
 
}

<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><b>Currently Online</b></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>

jsfiddle.net에 또한

: https://jsfiddle.net/3gwfw5bc/2/

jsfiddle 버전 사이 버전 위의 두 가지 차이가 있습니다; #main에 min-height: 150px을 설정하고 #wrapper에 min-height: 300px을 설정했지만 여기서는 수행하지 않았습니다. 여기 코드 데모에서는 작은 화면에 맞지 않으므로 첫눈에 실망합니다! 그러나 소형 장치의 경우에는이를 고려해야합니다.

출처

2017-03-15 04:07:58 ata

조금 나아졌습니다. 그것이 나의 레이아웃을위한 것일지도 모른다고 생각한다. 감사! – SolidSnake

내 css 및 html이 매우 이상하게 구성되어 있습니다. 어떻게 채팅 창 크기를 브라우저와 함께 조절할 수 있습니까?

답변

관련 문제