Question

我见过很多问题，但似乎都没有解决我的问题。

我有两个div：mainbody和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

这应该有效

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

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

4 个答案: