如何使用CSS将可滚动div放在不可滚动的div旁边？

Question

以下是正在发生的事情：http://jsfiddle.net/Rf7vP/1/

基本上，我试图让我的内容不在垂直导航下。我在position上尝试了所有不同类型的.content，并尝试了float: right;这两种方式也无效。

执行此操作的语义正确，最有效的方法是什么？

当前的CSS：

div.nav {
float: left;
width: 150px;
margin-right: 20px;
background-color: rgba(102, 153, 204, 1);
height: 100vh;
position: fixed; }

.content {
overflow: auto; }

.wrapper {
width: 880px;
margin: 0 auto;
text-align: left; }

当前HTML：

<div class="wrapper">

    <div class='nav'>
        <ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
    </div>

    <div class='content'>
Lots of text...
</div>
</div>

Answer 1

不确定这是否是最佳解决方案，但您可以将内容的左边距设置为150px以关闭从导航中设置

http://jsfiddle.net/Rf7vP/2/

.content {
    margin-left: 150px;
    overflow: auto;
}

Answer 2

我会给内容区域留下150px的左边距（与导航的宽度相同）。

我认为还没有其他方法可以使用纯CSS。由于您在导航容器上使用position：fixed，因此您将从文档的正常流程中取出它。内容容器将始终位于其下方，除非您将其向右偏移，方法是使用左边距，其值等于导航容器的宽度。

Answer 3

添加此

.content {
    overflow: auto;
    margin-left:160px;
}