html - 右侧 div 的放置和并排设计

Question

如果有人能帮助我解决这个问题，我将不胜感激，因为我无法让它工作。

这是我正在努力处理的代码:http://jsfiddle.net/sp91c3nk/

基本上，我希望右侧导航栏与灰色主要内容区域处于同一水平(并排)。现在它(灰色的主要内容区域)自动扩展并填满 100%，即使我尝试像 margin-right: -100px 这样的东西。它应该顺从地填充空间直到导航 div。

主要的 div 需要是可滚动的，因为我需要用很多内容填充它以用于我和几个 friend 之间的一个小合作元素。因此需要设置为overflow: auto;以确保它运作良好。有什么方法可以将导航 div 放置到位吗？请注意，我需要主要内容区域占用导航 div 未归档的剩余空间。

顺便说一句，在我将导航 div 放置到位之前，高度目前是固定的。如果你们也能向我指出如何在未来根据需要使两者“扩展”，那就太棒了。我的 google fu 技能似乎还不够强。

网页

    <div id="main">
    text goes here
    </div>


    <div id="navigation">
        <br>
        <ul>
            <li> item </li>
            <li> item </li>
        </ul>

    </div>

</div>

</body>
</html>

CSS #包装器 { 宽度:100%； 高度:100%； 背景色:白色；

#main 
{

height: 400px;
float: left;
background-color: gray;
border: 1px solid black;
overflow: auto;
width: 100%;

}

#navigation
{
float: right;
width: 150px;
height: 400px;
background-color: yellow;
overflow: auto;

}

编辑:抱歉。似乎无法在移动设备上正确获取代码部分!将在 15 小时内编辑

Answer 1

您可以对宽度使用计算函数。

JSFiddle

#main 
{
height: 400px;
float: left;
background-color: gray;
border: 1px solid black;
overflow: auto;
width: calc(100% - 152px);
}

请记住，-152 来自 #navigation 的宽度填充和边框的总和。还要记住， calc 函数有一个 less that desirable cross-browser support .

另一种解决方案需要更改 html。如果您想使用它，请大声疾呼，我会举个例子。