Mediocre Mediocre - 7 months ago 19
HTML Question

Unnecessary vertical scroll bar even when parent and child height are same

I have a simple code base

HTML:

<div class="displayContainer">
<div class="sideBar">
</div>
<div class="contentHolder">
</div>
</div>


CSS:

.displayContainer {
height: 100%;
width: 100%;
overflow: auto;
white-space: nowrap;
}

.sideBar {
display: inline-block;
width: 20%;
height: 100%;
}

.contentHolder {
display: inline-block;
width: 100%;
height: 100%;
}


I just wanted to create a
.sideBar
and a
.contentHolder
inside of a
.displayContainer
. Now the problem is display container is displaying unnecessary vertical scroll bar. Horizontal scroll bar has to be with it. But there is no need for a vertical scroll bar.

I have inspected and found that the display container and the inner child elements are having same computed height. Then why the vertical scroll bar is displaying? I do not want it basically. Can anyone give idea on how to remove that?

DEMO


Answer

Browsers provide space below inline elements to accommodate descenders.

enter image description here

Source: Wikipedia.org

In typography, lowercase letters such as j, g, p and y, which breach the baseline, are known as descenders. The space browsers add for descenders is not margin or padding, so it's not easy to detect in developer tools.

You can see the descender space in your demo. When you scroll to the bottom, you'll notice there's a small gap made up of whitespace only (demo from the question).

This space adds height to your inline-block elements, which causes the vertical scrollbar.

Here are several ways to handle this:

  1. Apply vertical-align: bottom to your inline-block elements.

  2. Switch 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.)