20

I want my .sideBar and .contentHolder elements inside of .displayContainer.

The problem is .displayContainer is rendering an unnecessary vertical scroll bar. Horizontal scroll bar is okay, but there is no need for a vertical scroll bar.

I have inspected and found that the .displayContainer and the child elements have the same computed height. So then why is there a vertical scroll bar?

Can anyone give me an idea how to remove it?

body, html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  height: 100%;
  width: 100%;
}
.displayContainer {
  height: 100%;
  width: 100%;
  overflow: auto;
  white-space: nowrap;
}
.sideBar {
  background-color: green;
  display: inline-block;
  width: 20%;
  height: 100%;
}
.contentHolder {
  background-color: red;
  display: inline-block;
  width: 100%;
  height: 100%;
}
<div class="displayContainer">
  <div class="sideBar"></div>
  <div class="contentHolder"></div>
</div>

jsFiddle

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Mediocre
  • 281
  • 2
  • 9

2 Answers2

31

Short Answer

You've run into one of the sneakiest default settings in CSS: vertical-align: baseline

Switch the value to top, bottom or middle, and you should be all set.

Explanation

The initial value of the vertical-align property, which applies to inline-level and table-cell elements, is baseline. This allows browsers to provide space below elements for so-called descenders.

In typography, lowercase letters such as j, g, p and y are known as descenders because they breach the baseline.

baseline

The baseline is the line upon which most letters sit and below which descenders extend.

enter image description here

Source: Wikipedia.org

Being that all inline-level elements are, by default, vertical-align: baseline, elements such as button, input, textarea, img and, like in your code, inline-block divs, will be elevated slightly from the bottom edge of their container.

enter image description here

Source: Wikipedia.org

This descender space adds height inside the container, which causes an overflow and triggers the vertical scroll.

You can see the descender space by scrolling to the bottom of your demo. You'll notice the small gap between the child elements and the bottom edge.

Here are several ways to handle this:

  1. Override vertical-align: baseline with vertical-align: bottom (or another value).

  2. Switch from display: inline-block to display: block.

  3. Set a line-height: 0 on the parent.

  4. Set a font-size: 0 on the parent. (If necessary, you can restore the font-size on the children.)

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 2
    THANK YOU! - I've struggled with this for years, inventing countless rickety workarounds. Finally, I get it – T4NK3R Apr 20 '17 at 14:27
  • 1
    HOLY CRAP I've been bashing my head against the wall with this one for ages. In case it helps anyone else, my setup was a load of nested 100% sized divs with display: flex; and I couldn't for the life of me fix it on the first scrolling div without resorting to options 3 or 4 (and I didn't want the cascading effects). FINALLY figured that I had a video 100% sized element as the child of all those divs, and setting `vertical-align: bottom;` on the video element FIXED EVERYTHING PERFECTLY!!! – Geoff Davids Jun 15 '21 at 06:31
0

I believe the reason that the vertical scroll bar is showing is because there is the horizontal scroll bar. Because the horizontal sidebar covers some of the bottom of each div, 100% of the height of div cannot be seen, so it adds the vertical scroll bar to let you see all of the content.

If there's not going to be anything in the last 20px or so (which to be honest there really shouldn't) then the work around that Dhaval suggests (adding overflow: hidden; to your css) should be fine.

If you do want to see content all the way down you can try using absolute values or just change 100% to 99%

user1911422
  • 43
  • 1
  • 7