Question

我为聊天窗口设置了基本的CSS。我把它分成4个部分。问题出现在右下角的clients 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;对于bottomPanel。无论你滚动多少，它都会粘在你页面的底部。

在页面调整大小并在页面中创建底部间隙时，Div不会保留到位

1 个答案: