css - Div 不会在页面调整大小时停留在原位并在页面中创建底部间隙

Question

我为聊天窗口设置了一个基本的 CSS。我把它分成 4 个部分。问题出在右下角的 clients div 中。当我滚动并在 div bottomPanel 下方创建一个大间隙时，div 不会停留在原位。我怎样才能让 clients div 处于正确的位置而不导致页面中断？虽然在JSFIDDLE中似乎是正常的它不在我的本地服务器中。

CSS

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

HTML

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

Answer 1

设置margin-bottom:-2000px;对于底部面板。无论您滚动多少，它都会停留在页面底部。