滚动条会覆盖div

Question

当div上出现滚动条时，我遇到了问题，感谢overflow-y: auto;。

当右侧div #bb有一个滚动条（在其中添加更多行以查看它）时，滚动条位于#help div之上。 如何让这个#help div在左侧移动，以免被滚动条覆盖？

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我已经改变了一些事情，我已经使用flexbox让它们彼此相邻，我已经将两半的位置相对。我已将<?xml version="1.0" encoding="utf-8"?> <manifest package="com.commonsware.android.something.something" xmlns:android="http://schemas.android.com/apk/res/android"> <application android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme"> <uses-permission android:name="INTERNET"/> <uses-permission android:name="ACCESS_NETWORK_STATE"/> <!-- cool stuff goes here --> </application> </manifest> 置于?内并将其设置为绝对位置。

＆＃13;

＆＃13;

#bb

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

希望这有用。

修改

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

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

这使用滚动主体滚动右列（左列固定到位）。这意味着<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>会考虑滚动条。

Answer 2

简单的方法是将bb div宽度设置为48％

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;