如何实现具有固定侧边栏和可滚动内容的CSS布局？

Question

我想创建这样的布局：

红色：修复了侧栏在打开时向右展开的问题。

蓝色：当侧边栏展开时，内容，可滚动和应向右移动

现在，当我尝试使用float属性对其进行编码时，侧边栏也会滚动。如何创建不滚动的固定侧边栏？但是，右边的内容仍应滚动。

.sidebar, .content {
    float: left;
}

JSFiddle Demo

感谢您的时间。

Answer 1

<强>已更新

设置侧栏position:fixed

http://jsfiddle.net/6tMFm/3/

Answer 2

试试这个

http://jsfiddle.net/6tMFm/28/

CSS

.sidebar {
    background-color: #f12f2f;
    width: 50px;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    overflow-x:scroll;
}

.sidebar.extended {
    width: 100px;

}

.content {
    background-color: #4c8ae8;
    width: 200px;
    left:65px;
    top:0;
    position:absolute;
    padding:10px;
}

.sidebar，。content {

height: 1000px;
width:auto;
float:left;
position:absolute;
right:0;

}

.clearBoth {
    clear: both;
}

HTML

<div class="sidebar">Fixed Side</div>
<div class="content">loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/>loremipsum<br/><br/>lorem ipsum<br/><Br/></div>
<div class="clearBoth"></div>

Answer 3

谢谢大家，但这是the solution我一直在寻找：

.content {
    background-color: #4c8ae8;
    width: 200px;
    overflow: auto;
}

.actual-content {
    height: 1000px;
}

HTML：

<div class="content">
    <div class="actual-content">Lorem ipsum</div>
</div>

不需要额外的JS并且它是动态的（例如，当侧边栏的宽度改变时）

Answer 4

为.sidebar

尝试位置：固定

.sidebar {
    background-color: #f12f2f;
    width: 50px;
    position:fixed;
}