• Css 之overflow——溢出元素内容区域的处理


    背景

    今天,在制作微信小程序时,发现,弹出框内的下拉框内容被遮挡。

     怎样才能让下拉的内容不被遮挡,这是一个问题。于是我想出了两个解决方案。

    • 把下拉框的弹出内容方到上面去。
    • 改变弹出框的样式,让它溢出的下拉框内容可见。

    第一个方案,近期有时间,我自个更新一下插件;第二个方案,现在就用它解决了。

    解决过程

    经过调试。不显示弹出框的overflow,下拉框就不会被隐藏了。

     于是,这里先简单的为其更改overflow属性。

    1   <view class="cu-modal " :class="ModalName ? 'show' : '' " @tap="hideModal"> 
    2    <!-- overflow: visible 用于下拉框部分被隐藏的问题 --> 
    3    <view class="cu-dialog" style="overflow: visible;" @tap.stop=""> 
    4     <!--  隐藏其他无关代码 --> 
    5    </view> 
    6   </view>

    接下来,还是要说明一下overflow。

    浏览器支持

    表格中的数字注明了完全支持该属性的首个浏览器版本。

    属性 Chrome IE Firefox Safari Opera
    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属性的值。

     参考网址

  • 相关阅读:
    《人月神话》阅读笔记3
    团队冲刺0110
    团队冲刺0109
    团队冲刺0108
    团队冲刺0107
    团队冲刺0106
    团队冲刺0105
    团队冲刺010304
    团队冲刺0102
    团队冲刺0101
  • 原文地址:https://www.cnblogs.com/luyj00436/p/15131401.html
Copyright © 2020-2023  润新知