Question

此屏幕截图显示了我的问题：

http://oi45.tinypic.com/2vskt2a.jpg“＆GT;

我的页面看起来像预期的那样（顶部图像），但是一旦观察者缩小，右侧的元素向内移动，在右侧留下空白区域（底部图像）。这不应该发生;元素应始终保持在右侧。

这是我试过的CSS代码;它运行良好，直到我使用浏览器的zooom out功能进行测试。

#left {
    width:920px;
    top:120px;
    height:400px;
    position:absolute;
    background:#fff;
}
#right {
    position:fixed;
    right:0px;
    left:920px;
    height:400px;
    overflow-y:auto;
}

Answer 1

这对你有用吗？

HTML：

<div id="head">
</div>
<div id="content">
    <div id="nav">
    </div>
    <p>
        content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
    </p>
</div>
<div id="foot">
</div>

CSS：

#head{
    height:100px;
    background-color:black;
}

#foot{
    height:100px;
    background-color:black;
}

#content{
    height:100px;
}

#nav{
    height:100px;
    width:100px;
    background-color:gray;
    float:right;
}

DEMO

UPD ：更新了html，因此它可以正常使用内部的一些内容。

UPD2 ：由于我触及了内容，因此您也可以为您的内容添加overflow:auto，因此如果内容不完整，它仍然可以查看适合：Demo

Answer 2

最好以百分比表示（假设您的屏幕分辨率为1024像素）

#left {
width:90%;
float:left;
height:400px;
background:#fff;}

#right {
float:right;
width:10%;
height:400px;
overflow-y:auto;
}

始终在右侧放置<div>元素，当浏览器在浏览器</div>中缩小时也是如此

2 个答案: