两个divs一个滚动，另一个是静态的

Question

我想要两个div彼此相邻，一个div滚动，另一个静态。一个例子是AirBnb's Map。

我很难让右侧栏浮动到左侧栏的右侧。我怎么能让左边的酒吧总占用60％的空间，而右边的酒吧总是占40％？在下面的代码中，从不显示右侧栏。

这里是fiddle。

#container { 
 
    height: 100px; 
 
    position: absolute; 
 
    top: 62px; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
#left-bar { 
 
    background-color: red; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 60%; 
 
    overflow-y: scroll; 
 
} 
 
#right-bar { 
 
    position: relative; 
 
    background-color: green; 
 
    display: block; 
 
    position: fixed; 
 
    right: 0; 
 
    left: auto; 
 
    bottom: 0; 
 
}

<div id="container"> 
 
    <div id="left-bar"></div> 
 
    <div id="right-bar"></div> 
 
</div>

Answer 1

更新fiddle

#right-bar { 
    position: relative; 
    background-color: green; 
    display: block; 
    position: fixed; 
    right: 0; 
    bottom: 0; 
    //added 
    width: 40%; 
    height: 100%; 
} 

Answer 2

该代码似乎unneccesarily复杂，尤其是在固定位置（也绝对之一）。这个怎么样：

https://jsfiddle.net/ubgcas1a/

这将使用直列块和定义的宽度和高度：

html, body { 
    margin: 0; 
} 
* { 
    box-sizing: border-box; 
} 

#container { 
    height: 100px; 
    width: 100%; 
    margin-top: 62px; 
} 

#left-bar { 
    background-color: red; 
    display: inline-block; 
    width: 60%; 
    height: 100%; 
    overflow-y: scroll; 
} 

#right-bar { 
    background-color: green; 
    display: inline-block; 
    width: 40%; 
    height: 100%; 
} 

Answer 3

它缺少#right-bar的top:0;，你还应该设置width:40%;，而你并不需要在#container上设置任何规则，或者直接删除它，因为固定位置是相对于视口的。

1.固定位置的方法：

#left-bar { 
 
    background-color: lightblue; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 60%; 
 
    overflow-y: auto; 
 
} 
 
#right-bar { 
 
    background-color: lightgreen; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 40%; 
 
}

<div id="left-bar"> 
 
    <div style="height:1000px;">scroll</div> 
 
</div> 
 
<div id="right-bar">static</div>

2. Flexbox的方法：

html, body { margin: 0; height: 100%; } 
 
body { 
 
    display: flex; 
 
} 
 
#left-bar { 
 
    background-color: lightblue; 
 
    width: 40%; 
 
    overflow-y: auto; 
 
} 
 
#right-bar { 
 
    background-color: lightgreen; 
 
    width: 60%; 
 
}

<div id="left-bar"> 
 
    <div style="height:1000px;">scroll</div> 
 
</div> 
 
<div id="right-bar">static</div>

3. CSS表方法：

html, body { margin: 0; height: 100%; } 
 
body { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
#left-bar { 
 
    background-color: lightblue; 
 
    display: table-cell; 
 
    width: 40%; 
 
    position: relative; 
 
} 
 
#right-bar { 
 
    background-color: lightgreen; 
 
    display: table-cell; 
 
    width: 60%; 
 
} 
 
#scrolling { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    overflow-y: auto; 
 
}

<div id="left-bar"> 
 
    <div id="scrolling"> 
 
    <div style="height:1000px;">scroll</div> 
 
    </div> 
 
</div> 
 
<div id="right-bar">static</div>