Question

我使用overflow：auto。

时出错

我使用的代码http://codepen.io/sebazelonka/pen/pDGin

即使内容的高度与容器的高度相同，滚动条也是可见的。我尝试了不同的选项，但错误仍然存在。

我在不同的浏览器中尝试过它，包括FF，Chrome，Safari和Opera，并且始终存在相同的错误。

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

以下是两种不同的解决方案：

将vertical-align:top添加到img元素。（默认为vertical-align:baseline）
将img更改为block级元素。

Updated Codepen example使用vertical-align:top

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

Updated Codepen example使用display:block

注意：对于水平居中，请使用margin:0 auto，因为text-align:center将不再有效，因为该元素不再是inline元素。

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

另外，如果窗口太小，请不要与身体上添加的滚动条混淆。 img包装器上的滚动条已被删除。

Answer 2

只需将您的.image-viewport课程更改为：

.image-viewport {
  overflow: hidden;
}

即使没有必要，滚动条也可见 -

2 个答案: