スクロールバーがdivを上書きする

Question

overflow-y: auto;のおかげで、divにスクロールバーが表示されるときに問題が発生しました。

右のdiv #bbは（それが起こる見て、その中に多くの行を追加します）スクロールバーを持っている場合は、スクロールバーが#help div要素の上にあります。 これを行う方法#help divはスクロールバーによって上書きされないように左に移動しますか？

html, 
 
body { 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#aa { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
#bb { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 50%; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
#help { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    background-color: green; 
 
}

<div id="aa" contenteditable>a 
 
    <br>few 
 
    <br>lines 
 
</div> 
 
<div id="bb" contenteditable>please add more 
 
    <br>lines here to make 
 
    <br>the scrollbar appear!</div> 
 
<div id="help">?</div>

Answer 1

にBB divの幅を設定することで、Iフレックスボックスを使って両者を隣り合わせにしました。私は両者の相対的な位置関係を作りました。そして私は?を#bbの中に置き、絶対位置に設定しました。

html, 
 
body { 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.flex-container { 
 
    display: flex; 
 
    width: 100vw; 
 
    height: 100vh 
 
} 
 
#aa { 
 
    position: relative; 
 
    flex: 1; 
 
    height: 100%; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
#bb { 
 
    position: relative; 
 
    flex: 1; 
 
    height: 100%; 
 
    background-color: blue; 
 
    overflow-x: hidden; 
 
    overflow-y: scroll;/* Just so the bar is there */ 
 
} 
 
#help { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    background-color: green; 
 
}

<div class="flex-container"> 
 
    <div id="aa" contenteditable>a 
 
    <br>few 
 
    <br>lines 
 
    </div> 
 
    <div id="bb" contenteditable> 
 
    I've made it always 
 
    <br>so the scrollbar is 
 
    <br>there but you can 
 
    <br>change it back to auto 
 
    <div id="help">?</div> 
 
    </div> 
 
</div>

希望はこれが便利です。私はそれをいくつかの考えを与えてくれた

EDIT

。私はこれがこれを行う良い方法かもしれないと思う。

html, 
 
body { 
 
    min-height: 100vh; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#aa { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 50%; 
 
    height: 100vh; 
 
} 
 
#bb { 
 
    margin-left: 50%; 
 
    min-height: 100vh; 
 
    background-color: blue; 
 
} 
 
#help { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    background-color: green; 
 
}

<div id="aa" contenteditable>a 
 
    <br>few 
 
    <br>lines 
 
</div> 
 
<div id="bb" contenteditable>please add more 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>lines here to make 
 
    <br>the scrollbar appear! 
 
</div> 
 
<div id="help">?</div>

これは、右側の列（左列が所定の位置に固定されている）をスクロールするために身体のスクロールを使用します。つまり、right:0;はスクロールバーを考慮に入れます。

Answer 2

簡単な方法は、私は物事のカップルを変更した48％

html, 
 
body { 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#aa { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
#bb2 { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 50%; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: blue; 
 
} 
 
#bb { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 50%; 
 
    width: 48%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
#help { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    background-color: green; 
 
}

<div id="aa" contenteditable>a 
 
    <br>few 
 
    <br>lines 
 
</div> 
 
<div id="bb2"></div> 
 
<div id="bb" contenteditable>please add more 
 
    <br>lines here to make 
 
    <br>the scrollbar appear!</div> 
 
<div id="help">?</div>