我有一个不断扩展的DIV动画:http://codepen.io/gabrielmalinosqui/pen/OyLogq
我现在要做的是在div中添加一个列表,其中包含一个" content"唯一的问题是,如果我的列表太长,它将被剪切,因为parrent div有一个绝对位置和溢出设置为隐藏。
即使父母有position:absolute
和overflow:hidden
如果我将我的列表更换为非样式,它将起作用,选择不会被修剪,但这可能是一些浏览器样式?
HTML:
<div class='wrap'>
<div class='content'>
<h2>Well Hello!</h2>
<p>contents...</p>
</div>
</div>
<a class='button glyphicon glyphicon-plus' href='#'></a>
的CSS:
.wrap {
position: absolute;
overflow: hidden;
top: 10%;
right: 10%;
bottom: 85px;
left: 10%;
padding: 20px 50px;
display: block;
border-radius: 4px;
transform: translateY(20px);
transition: all 0.5s;
visibility: hidden;
}
.wrap .content {
opacity: 0;
}
.wrap:before {
position: absolute;
width: 1px;
height: 1px;
background: white;
content: "";
bottom: 10px;
left: 50%;
top: 95%;
color: #fff;
border-radius: 50%;
-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrap.active {
display: block;
visibility: visible;
box-shadow: 2px 3px 16px silver;
transition: all 600ms;
transform: translateY(0px);
transition: all 0.5s;
}
.wrap.active:before {
height: 2000px;
width: 2000px;
border-radius: 50%;
top: 50%;
left: 50%;
margin-left: -1000px;
margin-top: -1000px;
display: block;
-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrap.active .content {
position: relative;
z-index: 1;
opacity: 1;
transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
答案 0 :(得分:0)
将overflow-y: scroll
添加到您的.wrap { }
班级
.wrap {
position: absolute;
overflow: hidden;
overflow-y: scroll; //Add this
top: 10%;
right: 10%;
bottom: 85px;
left: 10%;
padding: 20px 50px;
display: block;
border-radius: 4px;
transform: translateY(20px);
transition: all 0.5s;
visibility: hidden;
}