1

我知道在这里之前有人问过类似的问题。

但它有点不同，因为它涉及css transitions.

http://jsfiddle.net/fariskassim/rWNJN/4/

.panel{

width:inherit;
height: 0%;
display:block;
position: absolute;

background: #000;
opacity:0;
z-index: 2;

margin-top: 40px;
margin-right: 40px;
margin-left: 40px;
margin-bottom: 40px;

bottom:0;
top:0;
left:0;
right:0;

-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;

}

打开盒子后，

我试图让绿色框40px在浏览器周边的所有侧面都有一个，我已经设法为左/右和顶部做到了，但底部是一个问题。

知道我该如何解决这个问题吗？

编辑：同时，我仍然想要打开和关闭盒子时的擦除效果。

http://jsfiddle.net/fariskassim/rWNJN/4/

4

2 回答 2

2

随心所欲+ 响应高度

.panel:target{

    background-color: rgba(226, 229, 16, 0.8);
    opacity:100;
    height: auto;

    width:inherit;
    display:block;

    margin-top: 40px;
    margin-right: 40px;
    margin-left: 40px;
    margin-bottom:40px;
    bottom:0;
    top:0;
    left:0;
    right:0;
}

自动调整演示

于 2013-03-21T06:55:52.890 回答
0

那是因为你已经height:100%在.panel:target. 删除它就可以了。

.panel:target{

    background-color: rgba(226, 229, 16, 0.8);
    opacity:100;

    width:inherit;
    display:block;

    margin-top: 40px;
    margin-right: 40px;
    margin-left: 40px;

    bottom:0;
    top:0;
    left:0;
    right:0;
}

演示

于 2013-03-21T06:51:39.550 回答