Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

元素滚动条对盒子尺寸计算的影响

  当我们要对一个元素实现滚动条时首先要固定其尺寸,然后设置overflow属性为auto或scroll,这两个取值都和滚动条有关。auto是只有内容溢出时才出滚动条,而scroll是始终出现滚动条。这两种滚动条相对盒子的位置是不同的,它会影响到盒子计算。
  对于固定尺寸或自适应容器的盒子而言,这两种滚动条并没有差异。但是对于适应内容的盒子而言(例如float:leftdisplay:inline-block),滚动条的位置就会影响到尺寸的计算。overflow:auto的滚动条会出现在盒子内部,盒子的宽度不会改变,但容积会变小。而overflow:scroll产生的滚动条则在盒子外部,它不影响盒子的容积,但盒子自身的尺寸会变大。
<!DOCTYPE html>
<style>
div {border:1px solid #CCC;height:100px;display:inline-block;}
span {display:block;height:1000px;}
</style>
<div style="overflow:auto;">
  <span>南无阿弥陀佛</span>
</div>
<div style="overflow-y:scroll;">
  <span>南无阿弥陀佛</span>
</div>

  Chrome、Firefox、Opera,对其实现都比较一致,只有IE又搞起非主流来。

  测试于:
    IE 11 @ Windows 7
    Chrome 33 @ Windows 7
    Firefox 28 @ Windows 7
    Opera 20 @ Windows 7
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^