固定大小的div位于主屏幕右侧，填满屏幕的其余部分

Question

我看过很多问题，但没有一个能够完全解决我的问题。

我有两个div：mainbody和rightpanel。我希望rightpanel的大小是固定的（210px），并且坐在主体div的右侧，它填满了窗口的所有剩余空间。

因此，这将调整如下：

+----------------------------------------+ 
|        |   | 
|        |   | 
|        |   | 
|  mainbody    |rightpanel| 
|        |   | 
|        |   | 
|        |   | 
+----------------------------------------+ 

+-------------------------------+ 
|     |   | 
|     |   | 
|     |   | 
| mainbody   |rightpanel| 
|     |   | 
|     |   | 
|     |   | 
+-------------------------------+ 

我整理以下的作品目前的解决方案，但如果窗口下方约900px调整到合适的栏上得到被推到了底部，25％的剩余空间它太小以至于无法装入，所以我强制窗口以此宽度水平滚动。

#wrap { 
    width:97%; 
    margin:0 auto; 
} 

#mainbody { 
    float:left; 
    width: 75%; 
    margin-right: 10px; 
    margin-left: 10px; 
} 

#rightpanel { 
    float:right; 
    width: 22%; 
    min-width: 210px; 
    max-width: 210px; 
} 

Answer 1

，如果你浮起来你需要把右面板的主要内容之前：

<div id="rightpanel">blah blah blah</div> 
<div id="mainbody">blah blah blah 
    blah blah blah 
    blah blah blah 
</div> 

<style type="text/css"> 
    #rightpanel { 
     width:210px; 
     float:right; 
     background-color:red; 
    } 
    #mainbody { 
     margin-right:210px; 
     background-color:blue; 
    } 
</style> 

即使调整了页面大小，这也可以保持右侧面板正确对齐。

Answer 2

#mainbody { 
float: left; 
} 
#rightpanel { 
width: 210px; 
} 

你有没有尝试过这样的事情？

Answer 3

这应该工作在我的网站

<div id="container"> 
    <div id="left" style="background: #ff00ff; "> 
     Left 
     <div id="right" style="width: 210px; float: right; background: #ff0000;"> 
      Right 
     </div> 
    </div> 
</div> 

Answer 4

看：http://www.mcohenlawyer.com/
是你想要的吗？

如果是，这是CSS代码：
（在所有主要的浏览器都支持）

div.menubar { 
    position: fixed; /*can be absolute too*/ 
    width: 158px; 
    /*what comes latter is not relevant for your question*/ 
    /*......*/ 
} 
.body { /*the main body*/ 
    position: absolute; 
    right: 180px;/*can be 159px, if you don't want space between divs*/ 
    min-height: 870px; 
    /*what comes latter is not relevant for your question*/ 
    /*......*/ 
}