div 100 % 높이가 40px 아래쪽 여백

Question

여기에 이전에 비슷한 질문이 있습니다. 하지만 CSS 전환과 관련하여 조금 다릅니다.

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 있습니다. 왼쪽/오른쪽 및 상단에 대해 처리했으나 문제가 있습니다.

어떻게하면 해결할 수 있습니까?

EDIT : 동시에 상자를 열고 닫을 때 닦아내는 효과가 필요합니다. 당신이 .panel:target에 height:100%을 준 때문이다

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

Answer 1

. 그것을 제거하면 괜찮을 것이다. 당신이 원하는 무엇이든

.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; 
} 

DEMO

Answer 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; 
} 

auto adjust demo