Question

如何进行3列布局，其中左侧菜单栏和右侧菜单栏不跟随页面滚动而只有中心列滚动。我已经完成了它，但在屏幕更改中心div与其他人混合。

 <section id="wrapper">
  <div id="main">
    <aside id="left">
        <article>
                left menu
        </article>
    </aside>

    <aside id="right">

        this is middle

    </aside>
    <aside id="exright">
    this is right

    </aside>
  </div>
</section>

而css是：

    #wrapper {
    width: 1300px;
    min-height: 0px;
    /* [disabled]min-width: 1300px; */
    margin-left: auto;
    margin-right: auto;
}
#main {
    width: 1300px;
    min-width: 1300px;
    /*position:relative;*/
    /* [disabled]max-width: 1300px; */
}
#left {
    width: 280px;
    float: left;
    margin-left: 0.7%;
    margin-right: 0.7%;
    position:fixed;
    top:100px;
}
#right {
    width: 100%;
    max-width:700px;
    float: left;
    position:relative;
    left:300px;
    right:300px;
    top:110px;
    overflow-x:hidden;
}
#exright {
    width: 280px;
    margin-left: 10px;
    margin-right: 10px;
    float: left;
    position:fixed;
    left:1000px;
    top:110px;
}

Answer 1

你可以用简单的css来做。

只需使用

#centerdiv
{
    position: fixed;
}

它不应该滚动。

Answer 2

您可以这样做：

col{
   width: x%;
}

http://jsfiddle.net/qcebwq17/

3列布局，带固定侧柱

2 个答案: