css overflow使用总结

大家好，欢迎来到IT知识分享网。

overflow是个很强大的样式，在非常多的场合需要用到它，比如区域滚动。下面一一列举下使用。

不使用overflow

我给父元素设置了固定的高度，然后添加过多的文字，

 <view style="height: 100px; background-color: red"> <view style="word-break: break-all; font-size: xx-large"> 测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试字 </view> </view> 

可以看到，文字超过了父元素的高度。

使用overflow: auto

下面是仅添加overflow: auto;的效果

 <view style="height: 100px; background-color: red"> <view style="overflow: auto; word-break: break-all; font-size: xx-large"> 测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试字 </view> </view> 

 <view style="height: 100px; background-color: red"> <view style="overflow: auto; height: 100%; word-break: break-all; font-size: xx-large"> 测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试字 </view> </view> 

看，这是可以滚动的效果，截图可能不会很明显，但是确实有一个可滚动区域了。文字不会超出父元素了。

PS：经过测试，height换成max-height也是可以的。

相对高度真的有效果吗？

上面的测试一度让我觉得相对高度也能生效。其实真实情况是未必的。再看下面的例子：

 <view style="height: 100px; background-color: red"> <view> <view style="overflow: auto; height: 100%; word-break: break-all; font-size: xx-large"> 测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试字 </view> </view> </view> 

跟上面的变化就是在父元素和子元素中间又套了一层view，原来的父元素变成爷元素了。

然后就会发现，overflow又失效了。这里就不截图了。

这里其实就是因为overflow所在元素的父元素没有固定的高度，所以它无法计算通过相对高度计算出一个固定高度，所以也是不行的。

但是，下面这种情况是可以的：

 <view style="height: 100px; background-color: red"> <view style="height: 100%"> <view style="overflow: auto; height: 100%; word-break: break-all; font-size: xx-large"> 测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试字 </view> </view> </view> 

父元素对爷元素取个相对高度，层层计算，也可以得出overflow的固定高度，这种情况也是可以的。

但是，下面这种情况就不行了：

 <view style="height: 100px; background-color: red"> <view style="max-height: 100%"> <view style="overflow: auto; height: 100%; word-break: break-all; font-size: xx-large"> 测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试字 </view> </view> </view> 

将父元素改成max-height确是不行的，父元素要靠子元素的高度确定自己的高度，而子元素又需要父元素的高度才能定下来，相互依赖，就无法计算出准确的高度了，所以这种情况是不行的。

总结

overflow是需要有固定高度才可能生效。在父元素有固定高度的情况下，可以使用相对高度得出具体高度。