3

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>
Andrew Bone
  • 7,092
  • 2
  • 18
  • 33
Basj
  • 41,386
  • 99
  • 383
  • 673

2 Answers2

3

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.

Andrew Bone
  • 7,092
  • 2
  • 18
  • 33
  • Nice trick to have a scrollbar *always present* (when not needed it is disabled) so that we can place `?` at the right place once for all. But unfortunately, I don't want the scrollbar to be present when not needed... – Basj Nov 23 '16 at 15:24
  • @Basj did you read what I wrote? "I've made it always so the scrollbar is there but you can change it back to auto" The bar is just there to show it working, feel free to have it auto and it will still work :-) – Andrew Bone Nov 23 '16 at 15:25
  • Yes @AndrewBone but then the ? totally disappears when I add new lines to #bb (at least on FF47 Windows 7) – Basj Nov 23 '16 at 15:29
  • @Basj do you mean it vanishes when you scroll down? – Andrew Bone Nov 23 '16 at 15:33
  • Yes it currently does. (But the fact of having scrollbar always present is not what we want anyway. If I move to `auto` instead of `scroll` it's the same about ? that vanishes) – Basj Nov 23 '16 at 15:39
  • I already tried similar things, but the problem is that, now, ? is part of the text. Just do CTRL+A to select all content of the editable div: then the ? will be part of it... It seems it's very tricky to achieve what I want... – Basj Nov 23 '16 at 15:51
  • @Basj sorry pasted the wrong HTML, doesn't do that now. – Andrew Bone Nov 23 '16 at 15:53
  • Nice! Thanks a lot! What was the trick? Is it the `vh` thing? PS: you can remove the first snippet from answer. Last last thing: the blue column moves slighly on left (10 or 20px) when scrollbar appears, do you know how to fix that? Then it would be perfect :) – Basj Nov 23 '16 at 16:02
  • @Basj vh is "viewport height" it's just a more verbose way of doing 100%, the main change was using margin-left and moving the scrolling to the body rather than the div – Andrew Bone Nov 23 '16 at 16:06
  • Oh that's why the blue column #bb moves on the left when scrollbar arrives then, ok. – Basj Nov 23 '16 at 16:15
0

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>
Andrew Bone
  • 7,092
  • 2
  • 18
  • 33
linearSpin
  • 93
  • 1
  • 10
  • Thanks but it breaks a bit the usual user experience of having a scrollbar touching the right boundary of the screen... – Basj Nov 23 '16 at 14:46
  • I found a javascript function in this post --> http://stackoverflow.com/questions/9333379/javascript-css-check-if-overflow check this out. – linearSpin Nov 23 '16 at 14:56
  • or I thouht about a trick, set a second empty div under the 'bb', but with full 50% width and also a blue background, it should to the job. – linearSpin Nov 23 '16 at 14:58
  • The problem @linearSpin is that is not an event, so I won't be able to know when this happen... – Basj Nov 23 '16 at 14:58
  • It's the same @linearSpin : the scrollbar is not close to the boundary of the screen, this breaks the user experience standards... – Basj Nov 23 '16 at 15:22
  • Nobody can help You, becouse you did not gave us a proper quesiton. But here is the point: You make a mistake on very begining, the help 'div' should not be inside the 'bb'. Just make a button outside. – linearSpin Nov 24 '16 at 08:53