滚动条无法显示

1.问题描述：

页面为典型圣杯布局。中间内容区域分为左侧列和主列。在左侧有组织树，在数据增多时，未出现滚动条，导致数据遮挡。

2.分析问题：

（1）未出现滚动条，可能与外层盒子的overflow属性有关。

（2）本身的元素的高度显示是否正确。

3.调试问题;

实际问题的发生是在IE下的，但是IE的调试真心没有chrome方便。因此，仍然习惯的在chrome上进行调试，再在IE下看效果，如果有bug再进行调试。

（1）首先，定位元素，查看高度是否显示正常，发现最外层的col和main的高度是正常的，（有一个页面是不正常的，发现代码中嵌入了一个height:auto,而列的基本布局为100%，对其进行更改）

（2）更改overflow属性，将其设置为overflow为auto。

 

这里最基本的overflow的最基本的差别。

(3).滚动条出现了，但是仍然有部分内容无法正常的显示。定位问题组织树高度问题

height:100%

设定为百分比高度时，是相对于父元素的高度。如果父元素没有设置高度，浏览器会根据子元素来确定父元素的高度。

1、Margins 和 padding 会让你的页面出现滚动条。

2、元素实际高度大于你设定的百分比高度，元素的高度则会自动扩展。

 

（4）问题解决和总结

该问题比较基础，需要对常见的布局和overflow以及高度进行理解。虽然问题比较小，但是在开发中非常常见。特别是在有弹窗或者组织树等负责应用场景，但总体上可以通过该思路进行追踪。

进行补充overflow：hidden

• 常见的有overflow:hidden,比如常见的是解决float塌方的问题。其基本的原理是BFC（块级格式化上下文）定义独立的渲染区域
• 

生效条件: