Question

jsfiddle 我有三列，但我想要右列和左列，固定位置，当我滚动页面时这些列带有滚动，我的问题是，我不能让它们两个固定在他们的位置，我有另一个i18n的问题，当我从rtl变为ltr时。

CSS

    body{
    background:#fff;    
    margin:0px auto 0px auto ;
    padding:0px auto 0px auto ;

}
html{
    background:#fff;    
    margin:0px auto 0px auto ;
    padding:0px auto 0px auto ;
}

.inner-page{
    margin:0px auto 0px auto;
    padding:0px auto 0px auto;
    position: relative;
}
.inner-navbar{
    margin:0px auto 0px auto;
    padding:0px auto 0px auto;
    width:1000px;
}
.inner-page-right{
    background: #000; 
    width:200px;
    min-height:1000px;
            color:#fff;
            float:right
}
.inner-page-center{
    width:600px;
    min-height:1000px;
            float:right
}
.inner-page-left{
    background: #000; 
    width:200px;
    min-height:1000px;
            color:#fff;
            float:left
}
.inner-page-center-up{
    height:50px;
}
.inner-page-center-down{
    background-color:#e6e6e6;
    border:1px solid #cccccc;   
}

和Html

<div class="inner-page inner-navbar">
    <div class="inner-page-right" >
        column right
    </div><!--inner-page-big-right_right-->
    <div class="inner-page-center">
            column center
    </div><!--inner-page-big-right_right-->
    <div class="inner-page-left">
        column left
    </div><!--inner-page-big-left-->
</div><!--inner-page-->

Answer 1

您可以使用position: fixed修复左右列。我们将right: 50% / left: 50%置于中心，然后使用margin-right: -500px / margin-left: -500px将它们移动到容器宽度的一半，将它们放置在正确的位置：

<强> CSS

.inner-page-right {
    ...
    position: fixed;
    top: 0;
    right: 50%;
    margin-right: -500px;
}
.inner-page-left {
    ...
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -500px;
}

<强> Demo

Answer 2

我不认为这可以用纯css完成。您可以将两个设置为绝对位置并使用javascript滚动事件更新其最高值，以使它们始终位于导航器之上。

创建三列，其中两列固定位置

2 个答案: