[英]Scrollbar visible even when is not necessary -
I have an error using overflow:auto. 我使用overflow:auto时出错。
The error: http://cl.ly/image/0K1W3t151T0S 错误: http : //cl.ly/image/0K1W3t151T0S
The code I used http://codepen.io/sebazelonka/pen/pDGin 我使用的代码是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. 我在不同的浏览器中尝试过它,包括FF,Chrome,Safari和Opera,并且总是有相同的错误。
HTML 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 CSS
body {
background: #999;
}
.image-viewport {
overflow: auto;
}
.image-wrapper {
background: #333;
text-align: center;
}
.image-viewport.portrait img {
height: 100%;
}
Here are 2 different solutions: 这是两种不同的解决方案:
Add vertical-align:top
to the img
element. 将
vertical-align:top
添加到img
元素。 (default is vertical-align:baseline
) (默认为
vertical-align:baseline
)
Change the img
to a block
level element. 将
img
更改为block
级元素。
Updated Codepen example using vertical-align:top
使用
vertical-align:top
更新了Codepen示例
.image-viewport.portrait img {
height: 100%;
vertical-align:top;
}
Updated Codepen example using display:block
使用
display:block
更新了Codepen示例
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. 注意:对于水平居中,使用
margin:0 auto
,因为text-align:center
将不再起作用,因为元素不再是inline
元素。
.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. img
包装器上的滚动条已被删除。
Just change your .image-viewport
class to this: 只需将
.image-viewport
类更改为:
.image-viewport {
overflow: hidden;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.