1

我想创建这样的布局：

我想要实现的原型

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

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

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

.sidebar, .content {
    float: left;
}

JSFiddle 演示

感谢您的时间。

4

4 回答 4

1

更新

设置侧边栏position:fixed

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

于 2013-07-10T09:12:06.233 回答
1

试试这个

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>
于 2013-07-10T09:18:50.010 回答
1

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

.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，它是动态的（例如，当侧边栏的宽度发生变化时）

于 2013-07-10T09:32:39.040 回答
0

尝试位置：固定为 .sidebar

.sidebar {
    background-color: #f12f2f;
    width: 50px;
    position:fixed;
}
于 2013-07-10T09:16:11.347 回答