CODEWITHSUNDEEP
htmlcss
Basj
Basj

Reputation: 46361

Scrollbar overwrites a div

I have an issue when a scrollbar appears on a div, thanks to overflow-y: auto;.

When the right div #bb has a scrollbar (add more lines in it to see it happen), the scrollbar is over the #help div. How to make this #help div move on the left so that it's not overwritten by the scrollbar?

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>

Upvotes: 3

Views: 185

Answers (2)

Andrew Bone
Andrew Bone

Reputation: 7291

I've changed a couple of things, I've used flexbox to get them next to each other, I've made both halves position relative. And I've put the ? inside #bb and set it to position absolute.

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>

Hope this is helpful.

EDIT

I've given it some thought. I think this might be a better way to do it.

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>

This uses the scrolling of the body to scroll through the right column (the left column is fixed in place). This means right:0; will take the scroll bar into account.

Upvotes: 3

linearSpin
linearSpin

Reputation: 113

The easy way is to set the bb div width to 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>

Upvotes: 0

Related Questions