html - 滚动条覆盖一个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

我改变了一些东西，我使用 flexbox 使它们彼此相邻，我让两半的位置相对。我将 ? 放在 #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>

希望对您有所帮助。

编辑

我已经考虑过了。我认为这可能是更好的方法。

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; 将考虑滚动条。