Question

我正在完成我的聊天服务器的任务，我已经完成了大部分关键功能，其中一个感谢你们。我只需要一个小东西，而且我不太清楚该怎么做。

我需要这样做，以便我的聊天可以通过浏览器调整大小。到目前为止，它水平调整大小但不会垂直调整大小。我尝试将所有高度设置为百分比，但它没有调整窗口大小。

我希望在最大化时让它填满整个窗口，当我缩小窗口时，一切都随着我而缩小。我希望它与窗口一起调整大小，同时保持所有大部分相对在一起。我怎样才能做到这一点？感谢。

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

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

Answer 1

如果将#main设置为百分比，则应按页面高度进行缩放。现在它似乎将其高度限制在500px。您还可以将500px设置为最小高度，以便在小窗口大小时保持可见。

Answer 2

看看这个：

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版本与上述版本有两点不同;我为min-height: 150px设置#main，为min-height: 300px设置#wrapper，但未在此处设置。因为它不适合这里的代码演示中的小屏幕，你一见钟情就失望了！但是在小型设备的情况下应该考虑它。

我的css和html结构非常奇怪，我怎样才能使我的聊天窗口随浏览器调整大小？

2 个答案: