|
项目中，需要用到，对x轴方向的溢出的隐藏，而y轴溢出的进行显示。
使用： overflow-x: hidden; 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’.写了一个demo, 两个div, 父盒子红色边框，子盒子绿色边框。需要实现 x 方向隐藏，y 轴显示 图片：child.jpg  代码如下： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#father{
border: 1px solid red;
height: 200px;
width: 500px;
overflow-x: hidden;
overflow-y: visible;
}
#child{
border: 1px solid green;
width: 700px;
height: 400px;
}
</style>
</head>
<body>
<div id="father">
<div id="child">
</div>
</div>
</body>
</html>虽然设置了，overflow-x: hidden,overflow-y:visible.但是效果，却如下（x 轴隐藏，y轴变成了滚动条）：图片：bug1.jpg overflow-y, 变成了自动，因child高比较大，就出现了scroll。 如何实现想要的效果呢？,效果如下（x轴隐藏，y轴显示）： 图片：normal.jpg 代码如下： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#father{
border: 1px solid red;
height: 200px;
width: 500px;
overflow-x: hidden;
}
#child{
width: 700px;
}
.box1{
overflow-y: visible;
position: relative;
}
#subContent{
height: 400px;
width: 500px;
position: absolute;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box1">
<div id="father">
<div id="child">
<div id="subContent">
</div>
</div>
</div>
</div>
</body>
</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的子元素 |
|
|
公众号
