2014-09-01 63 views
0

如何进行3栏目布局,其中左侧菜单栏和右侧菜单栏不跟随页面滚动,只有中间栏滚动。我已经完成了它,但在屏幕变化中心与其他人混合。3带固定边栏的栏目布局

<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; 
} 
+1

向我们展示你尝试过什么。 – drip 2014-09-01 08:17:00

+0

使您的侧柱固定位置和中心没有。 – qtgye 2014-09-01 08:17:21

+0

你可以使用twitter引导。 http://getbootstrap.com/css/ – 2014-09-01 08:26:18

回答

0

你可以用简单的CSS做。

只需使用

#centerdiv 
{ 
    position: fixed; 
} 

,它不应该滚动。