Css Div在页面调整大小和在页面中创建底部间隙时不会保持在原位

我有一个聊天窗口的基本CSS设置。我把它分成了4个部分。问题出现在右下角的clients div中。当我滚动时，div没有保持在原来的位置，并创建了一个大间隙的波纹管div底部面板。如何使clients div处于正确的位置而不导致页面中断？虽然它看起来很正常，但它不在我的本地服务器上

CSS

HTML

---

设置边缘底部：-2000px；对于底部面板。无论你滚动了多少次，它都会粘在页面底部。

你的页面应该是一个单页，即查看端口的整个高度和宽度吗？如果是这样，为什么不使用包装器的位置固定？@otherDewi更正一页。不知道我是否理解。

html,body{
    width:100%;
    height:100%;
}

body{
    position:relative;
}

#wrapper{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border:1px solid #333;      
}

#upperPanel{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:100px;
}

#chat{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:200px; 
    background:#666;  
    overflow:auto;    
}

#operators{
    position: absolute;
    top:0;
    bottom:0;
    width:200px;
    right:0; 
    background:#999; 
    overflow:auto;   
    height:50%;
}

#bottomPanel{
    height: 100px;
    background:#EEE;
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
}

#bottomPanel textarea{
    position:absolute;
    top:10px;
    bottom:10px;
    left:10px;
    right:120px; 
    resize: none;
}

#clients{
    position: absolute;
    top:0;
    bottom:0;
    width:200px;
    right:0; 
    background:#FFFFFF; 
    overflow:auto;
    height:50%;
    margin-top:33%;
}

#bottomPanel input[type=submit]{
    position:absolute;
    top:10px;
    bottom:10px;
     right:10px;
    width:100px;
}

<div id="wrapper">
    <div id="upperPanel">
        <div id="chat">

        </div>
        <div id="operators">
            <center><b>Operators:</b></center>
            <ul>
                <li>
                    <span>Op1:</span>
                </li>
                <li>
                    <span>Op2:</span>
                </li>
                <li>
                    <span>Op3:</span>
                </li>
            </ul>
        </div>
              <div id="clients">
                  <center><b>Clients:</b></center>
            <ul>
                <li>
                    <span>Client1:</span>
                </li>
                <li>
                    <span>Client2:</span>
                </li>
                <li>
                    <span>Client3:</span>
                </li>
            </ul>
        </div>
    </div>
    <div id="bottomPanel">
        <textarea>
        </textarea>
        <input type="submit" value="send" />
    </div>
</div>