Div不会保留页面调整大小并在页面上创建底部间隙

Question

我有一个为聊天窗口设置的基本CSS。我把它分成了4个部分。问题出在位于右下角的clients div中。当我滚动时，div不会保留在原位，并创建一个大的间隙波纹区域bottomPanel。我怎么能得到clients股利在正确的位置，而不会导致页面中断？虽然它在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

设置下边距：-2000px;底部面板。无论你滚动多少，它都会粘在页面的底部。