Css之overflow——溢出元素内容区域的处理
背景
今天，在制作⼩程序时，发现，弹出框内的下拉框内容被遮挡。
怎样才能让下拉的内容不被遮挡，这是⼀个问题。于是我想出了两个解决⽅案。
把下拉框的弹出内容⽅到上⾯去。
改变弹出框的样式，让它溢出的下拉框内容可见。
第⼀个⽅案，近期有时间，我⾃个更新⼀下插件；第⼆个⽅案，现在就⽤它解决了。
解决过程
经过调试。不显⽰弹出框的overflow，下拉框就不会被隐藏了。
于是，这⾥先简单的为其更改overflow属性。
1<view class="cu-modal " :class="ModalName ? 'show' : '' " @tap="hideModal">
2<!-- overflow: visible ⽤于下拉框部分被隐藏的问题 -->
3<view class="cu-dialog" @tap.stop="">
4<!--  隐藏其他⽆关代码 -->
5</view>
6</view>
接下来，还是要说明⼀下overflow。
浏览器⽀持
表格中的数字注明了完全⽀持该属性的⾸个浏览器版本。
属性Chrome IE Firefox Safari Operacss设置表格滚动条
overflow 1.0  1.0 1.0    1.0    1.0
定义和⽤法
overflow属性规定内容溢出元素框时发⽣的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，⽤户处理队徽提供⼀种滚动机制，因此，有可能即使元素框中可⽤放下所有内容也会出现滚动条。
默认值:visible
继承性:no
版本：CSS2
JavaScript语法：object.style.overflow="scroll"
可能的值
值描述
visible默认值。内容不会被修剪，会呈现在元素之外。
hidden内容会被修剪，并且其余内容不可见的。
scroll内容会被修剪，但浏览器会显⽰滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显⽰滚动条以便查看其余的内容。
inherit规定应从⽗元素继承overflow属性的值。
参考⽹址

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。