Scrollbar visible even when is not necessary -

Question

I have an error using overflow:auto.

The error: http://cl.ly/image/0K1W3t151T0S

The code I used http://codepen.io/sebazelonka/pen/pDGin

Even when the height of the content has the same height than container, the scrollbar is visible. I tried different options, but the error persist.

I tried it in different browsers, including FF, Chrome, Safari and Opera, and always have the same error.

HTML

<div class="image-viewport portrait" style="width: 100%; height: 400px;">
      <div class="image-wrapper" style="width: 100%; height: 400px;">
           <img src="http://www.hdwallpapersview.com/wp-content/uploads/2013/05/landscape_7.jpg">
      </div>
</div>

CSS

body {
  background: #999;
}

.image-viewport {
  overflow: auto;
}

.image-wrapper {
  background: #333;
  text-align: center;
}

.image-viewport.portrait img {
  height: 100%;
}

Answer 1

Here are 2 different solutions:

• Add vertical-align:top to the img element. (default is vertical-align:baseline )

• Change the img to a block level element.

Updated Codepen example using vertical-align:top

.image-viewport.portrait img {
    height: 100%;
    vertical-align:top;
}

Updated Codepen example using display:block

Note: For horizontal centering, use margin:0 auto , as text-align:center will no longer work, as the element is not an inline element anymore.

.image-viewport.portrait img {
    height: 100%;
    display:block;
    margin:0 auto;
}

Also, don't be confused with the scrollbar added on the body if the window is too small. The scrollbar on the img wrapper has been removed.

Answer 2

Just change your .image-viewport class to this:

.image-viewport {
  overflow: hidden;
}