css - 定位一个元素始终在右侧，当查看器在浏览器中缩小时也是如此

Question

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

http://oi45.tinypic.com/2vskt2a.jpg">

我的页面看起来与预期一样（上图），但是一旦查看器缩小，右侧的元素就会向内移动，在右侧留下一个空白区域（下图）。这不应该发生；该元素应始终保持在右侧。

这是我试过的 CSS 代码；在我使用浏览器的缩小功能进行测试之前，它运行良好。

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

演示​</a>

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