关灯
开启左侧

如何实现overflow-x:hidden and overflow-y:visible;

[复制链接]
doubleyong 发表于 2019-3-19 09:36:32 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
项目中,需要用到,对x轴方向的溢出的隐藏,而y轴溢出的进行显示。
使用:

  1. overflow-x: hidden;
  2. overflow-y: visible;
复制代码
发现,使用了这个没有效果,查阅文档发现,当overflow两个值不同时,如一个设置visible,会被重置会auto;
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.

如何实现想要的效果呢?,效果如下(x轴隐藏,y轴显示):

代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         #father{
  8.             border: 1px solid red;
  9.             height: 200px;
  10.             width: 500px;
  11.             overflow-x: hidden;
  12.         }
  13.         #child{
  14.             width: 700px;
  15.         }
  16.        .box1{
  17.            overflow-y: visible;
  18.            position: relative;
  19.        }
  20.         #subContent{
  21.             height: 400px;
  22.             width: 500px;
  23.             position: absolute;
  24.             border: 1px solid green;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <div class="box1">
  30.          <div id="father">
  31.              <div id="child">
  32.                    <div id="subContent">
  33.                    </div>
  34.              </div>
  35.         </div>
  36. </div>
  37. </body>
  38. </html>
复制代码
实现说明:
1. 将div, #child分成了两部分,一个设置宽度,一个高度。
2. #father 包含#child , 设置overflow-x 为hidden将x轴隐藏
3. 将#subContent设置的高度,脱离#child , 成为.box1的子元素,设置overflow-y 为visible即可


  通过, 设置#subContent的position:absolute, 来脱离#child. 然后,设置.box1的position:relative,让#subContent以.box1为准进行定位,即实现让#subContent成为.box1的子元素


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )