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

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

html css

我的css和html的结构非常奇怪，我怎样才能使我的聊天窗口随浏览器调整大小呢？,html,css,resize,window,chat,Html,Css,Resize,Window,Chat,我刚刚完成了我的聊天服务器的一项任务，我已经完成了大部分关键功能，其中一项要感谢你们。我只需要再做一件小事，我不太确定怎么做我需要这样做，以便我的聊天可以调整与浏览器。到目前为止，它可以水平调整大小，但不会垂直调整大小。我试着将我所有的高度设置为一个百分比，但它没有随窗口调整大小我想让它在最大化时填满整个窗口，当我缩小窗口时，一切都会随之缩小。我希望它能随着窗口的变化而调整大小，同时保持所有的窗口相对集中。我该怎么做？谢谢 HTML 如果将#main设置为百分比，则它应随页面高度缩放。现在它

我刚刚完成了我的聊天服务器的一项任务，我已经完成了大部分关键功能，其中一项要感谢你们。我只需要再做一件小事，我不太确定怎么做

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

我想让它在最大化时填满整个窗口，当我缩小窗口时，一切都会随之缩小。我希望它能随着窗口的变化而调整大小，同时保持所有的窗口相对集中。我该怎么做？谢谢

HTML

如果将#main设置为百分比，则它应随页面高度缩放。现在它似乎把它的高度限制在500像素。您还可以将500px设置为最小高度，以便在较小的窗口大小下保持可见。

请看以下内容：

body，div，h1，h2，h3，h4，h5，h6，p，ul，img{
边距：0px；填充：0px；。
}
身体{
字体系列：helvetica；
}
#包装纸{
背景色：#3a6db7；
填充：10px 30px 0px 30px；
保证金：自动；
高度：100vh；
}
#头衔{
文本对齐：居中；
颜色：#e8bf2e；
字体系列：arial；
字体大小：20px；
}
#用户名指示符h2
{
颜色：#e8842e；
浮动：左；
宽度：90%；
文字装饰：下划线；
}
#当前在线{
}
#主要
{
高度：计算（100vh-150px）；
}
#消息区{
宽度：90%；
身高：100%；
背景色：#ffffff；
浮动：左；
溢出：自动；
边框：1px实心；
位置：相对位置；
边界半径：5px；
}
#信息{
宽度：100%；
位置：绝对位置；
底部：0px；
最大高度：100%；
}
#信息李{
填充物：5px10px；
}
#信息李：第n个孩子（奇数）{
背景：#eee；
}
#用户名{
身高：100%；
背景色：#E5；
边框：1px实心；
宽度：9%；
浮动：左；
溢出：自动；
边界半径：5px；
}
#马塞巴拉里亚{
宽度：100%；
}
#形式{
宽度：100%；
}
表格输入{
宽度：90%；
边缘顶部：20px；
边缘底部：20px；
边界半径：5px；
}
窗体按钮{
宽度：9%；
背景：rgb（130244255）；
边界半径：5px；
}


SENG 513聊天室
目前在线

发送

看看这个：

body，div，h1，h2，h3，h4，h5，h6，p，ul，img{
边距：0px；填充：0px；。
}
身体{
字体系列：helvetica；
}
#包装纸{
背景色：#3a6db7；
填充：10px 30px 0px 30px；
保证金：自动；
高度：100vh；
}
#头衔{
文本对齐：居中；
颜色：#e8bf2e；
字体系列：arial；
字体大小：20px；
}
#用户名指示符h2
{
颜色：#e8842e；
浮动：左；
宽度：90%；
文字装饰：下划线；
}
#当前在线{
}
#主要
{
高度：计算（100vh-150px）；
}
#消息区{
宽度：90%；
身高：100%；
背景色：#ffffff；
浮动：左；
溢出：自动；
边框：1px实心；
位置：相对位置；
边界半径：5px；
}
#信息{
宽度：100%；
位置：绝对位置；
底部：0px；
最大高度：100%；
}
#信息李{
填充物：5px10px；
}
#信息李：第n个孩子（奇数）{
背景：#eee；
}
#用户名{
身高：100%；
背景色：#E5；
边框：1px实心；
宽度：9%；
浮动：左；
溢出：自动；
边界半径：5px；
}
#马塞巴拉里亚{
宽度：100%；
}
#形式{
宽度：100%；
}
表格输入{
宽度：90%；
边缘顶部：20px；
边缘底部：20px；
边界半径：5px；
}
窗体按钮{
宽度：9%；
背景：rgb（130244255）；
边界半径：5px；
}


SENG 513聊天室
目前在线

发送

Hey Adam lol。我尝试过将主高度作为一个百分比，但当我将窗口拖过聊天信息区域和按钮时，它不会随我调整大小，只是隐藏起来。这一切都很好，只是一个小功能。我提交了作业。谢谢。嘿，亚当，又来了，哈哈。我试着把主高度作为一个百分比，但当我把窗口拖过聊天信息区域和按钮时，它不会随着我调整大小，只是隐藏起来。这都很好，只是一个小功能。我提交了作业。谢谢，这让它变得更好了。我想这对我的布局是最好的。谢谢这让情况稍微好一点。我想这对我的布局是最好的。谢谢

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

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