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

Question

我想创建这样的布局：

红色：固定侧边栏在打开时向右扩展。

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

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

.sidebar, .content {
    float: left;
}

JSFiddle 演示

感谢您的时间。

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

谢谢大家，但这是我正在寻找的解决方案：

.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;
}