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

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

我有两个分区：主体和右面板。我想右面板是一个固定的大小（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;
}

你试过这样的东西吗

你试过类似的方法吗？

应该可以

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

左边
赖特

这应该行得通

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

左边
赖特

查看我的网站：
这是你想要的吗

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

查看我的网站：
这是你想要的吗

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

---

如果浮动，则需要将右侧面板置于主要内容之前：

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

废话废话
废话废话
废话废话
废话废话
#右面板{
宽度：210px；
浮动：对；
背景色：红色；
}
#主体{
右边距：210px；
背景颜色：蓝色；
}

---

这将保持右侧面板正确对齐，即使页面已调整大小。

如果浮动右侧面板，则需要将其置于主要内容之前：

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

废话废话
废话废话
废话废话
废话废话
#右面板{
宽度：210px；
浮动：对；
背景色：红色；
}
#主体{
右边距：210px；
背景颜色：蓝色；
}

---

这将保持右侧面板正确对齐，即使页面已调整大小。

这将使左侧填充整个窗口宽度，右侧向下推至左侧下方，位于窗口右侧，但从页面底部开始向右！这一个使左侧填充整个窗口宽度，而右侧被向下推到左侧下方，位于窗口右侧，但从页面底部开始！这使得主体填充页面的整个宽度，右侧面板位于页面的左侧，在主体的后面，尽管它被拉伸，内容被推到主体完成的下方。这使得主体填充页面的整个宽度，右侧面板位于页面的左侧，在主体后面，虽然它被拉伸，内容被推到主体完成的地方。@sunn0这正是我要找的，看起来应该可以工作，但右侧面板仍被推到主体下方，所以当我使用这个布局的时候，-210px位实际上是把屏幕的左边推出来的@sunn0这正是我想要的，它看起来应该可以工作，但是右面板仍然被推到主体下方，所以当我使用这个布局时，-210px位实际上将屏幕推向左侧！这正是我想要的，但是您的CSS使右侧面板正好位于屏幕左侧主体上方。我开始觉得我的页面中一定有别的东西把它搞乱了，因为这些解决方案都不起作用，我认为它们应该起作用！这正是我想要的，但是您的CSS使右侧面板正好位于屏幕左侧主体上方。我开始觉得我的页面中一定有别的东西把它搞乱了，因为这些解决方案都不起作用，我认为它们应该起作用！