높이 버튼이

Question

크기를 조정하지 않는 한이 코드를 가지고 :

HTML :

<div class="homebox"> 
    <ul> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Skills</a></li> 
     <li><a href="#">Blog</a></li> 
    </ul> 
</div> 

CSS : 내가 중심에 남아 사업부 박스가

.homebox { 
    width: 20%; 

    min-height: 300px; 
    height: 45%; 
    max-height: 50%; 

    position: absolute; 
    margin: 10% auto; 
    left: 0; 
    right: 0; 
    background: #999; 
    border-radius: 20px; 
    -webkit-box-shadow: 0 8px 6px -6px black; 
    -moz-box-shadow: 0 8px 6px -6px black; 
    box-shadow: 0 8px 6px -6px black; 
} 

.homebox > ul { 
    position: relative; 
    list-style: none; 
    width: 90%; 
    margin: 5% auto; 
} 

.homebox > ul li { 
    margin-bottom: 11%; 
    width: 100%; 
} 

.homebox > ul li a { 
    display: block; 
    position: relative; 
    height: 30%; 
    background: #34696f; 
    border: 2px solid rgba(33, 68, 72, 0.59); 

    color: rgba(0, 0, 0, 0.55); 
    text-align: center; 
    font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 

    text-decoration: none; 

    background: -webkit-linear-gradient(top, #34696f, #2f5f63); 
    background: -moz-linear-gradient(top, #34696f, #2f5f63); 
    background: -o-linear-gradient(top, #34696f, #2f5f63); 
    background: -ms-linear-gradient(top, #34696f, #2f5f63); 
    background: linear-gradient(top, #34696f, #2f5f63); 

    -webkit-border-radius: 25px; 
    -khtml-border-radius: 25px; 
    -moz-border-radius: 25px; 
    border-radius: 25px; 

    -webkit-box-shadow: 0 8px 0 #1b383b; 
    -moz-box-shadow: 0 8px 0 #1b383b; 
    box-shadow: 0 8px 0 #1b383b; 

    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2); 
} 

.homebox > ul li a:hover { 
    background: #3d7a80; 
    background: -webkit-linear-gradient(top, #3d7a80, #2f5f63); 
    background: -moz-linear-gradient(top, #3d7a80, #2f5f63); 
    background: -o-linear-gradient(top, #3d7a80, #2f5f63); 
    background: -ms-linear-gradient(top, #3d7a80, #2f5f63); 
    background: linear-gradient(top, #3d7a80, #2f5f63); 
} 

.homebox > ul li a:active { 
    -webkit-box-shadow: 0 0 0 #1b383b; 
    -moz-box-shadow: 0 0 0 #1b383b; 
    box-shadow: 0 0 0 #1b383b; 

    text-shadow: 0 0 0 rgba(255, 255, 255, 0.2); 
} 

그것은 외부 div 또는 body로부터 상대 너비와 높이를가집니다. ul li 내부의 태그를 div 상자에 응답해야합니다. homebox div 크기를 조정할 때 li 안의 앵커 태그의 높이가 조정되지 않습니다. 어떻게해야합니까?

Answer 1

높이가 작동하지 않도록 백분율로 설정합니다. 백분율 값은 IE에서만 작동합니다. 다른 브라우저에서도 작동하도록하려면 상위 div에서 고정 픽셀 높이를 설정해야합니다. 간단하게 CSS에 다음 코드를 추가하십시오.

html,body{height: 100%;}