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

Question

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

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

所以它会像这样调整大小：

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

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

我当前的解决方案如下，但如果将窗口调整到大约 900 像素以下，则右侧栏会被推到底部，因为 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

这应该可以工作

<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 3

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

你尝试过这样的事情吗？

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*/
    /*......*/
}