兩個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>