2つのdivは1つのスクロールと別のものは静的です

Question

2つのdivが互いに隣り合っていて、1つのdivがスクロールし、もう1つの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フレキシボックスアプローチ：

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>