CSS 100 % 높이 문제 다시

Question

좋아, 내가 할 수있는이 메뉴가있다, 그래서 그것의 일부 패딩과 여백이 있기 때문에 실제 css 100 %가 아닌 페이지의 100 % 이상이어야합니다. 너무 길어진다.) 그리고 scren 크기가 너무 작아서 모든 링크를 보여줄 수 없다면 커질 것이다.

HTML :

<div id="menu"> 
    <a href="index.html"><button><img src="img/open.png"/><div>Acceuil</div></button></a> 
    <a href="carte.html"><button><img src="img/toggled.png"/><div>La carte</div></button></a> 
    <a href="traiteur.html"><button><img src="img/toggled.png"/><div>Service traiteur</div></button></a> 
    <a href="reservation.html"><button><img src="img/toggled.png"/><div>Réservation</div></button></a> 
    <a href="gite.html"><button><img src="img/toggled.png"/><div>Gîte</div></button></a> 
</div> 

CSS : 구조에

#menu{ 
    background-color: #850101; 
    box-shadow: inset 0 0 25px rgba(0,0,0,.45); 
    padding-top: 114px; 
    margin-left: 5%; 
    min-height: auto; 
    display: block; 
    height:auto; 
    bottom:0; 
    top:0; 
    left:0; 
    right:0; 
    z-index: 1 
} 
#menu button{ 
    background-color: #640404; 
    box-shadow: inset 0 0 25px rgba(0,0,0,.45); 
    border: none; 
    width: 100%; 
    color: #fff; 
    font-size: 30px; 
    height: 60px; 
    text-align: left; 
    padding: 5 0; 
    margin-bottom: 7px; 
} 
#menu button:hover{ 
    background-color: rgba(94,1,1,0); 
} 
#menu img{ 
    margin-right: 30px; 
    padding-bottom: 2px; 
    margin-left: 5px; 
} 
#menu button div{ 
    display: inline; 
    position: absolute; 
} 

Answer 1

box-sizing!

#menu {box-sizing: border-box; min-height: 100%; padding: whatever;} 

접두사 버전은 다음과 같습니다

• -moz-box-sizing: border-box;
• -webkit-box-sizing: border-box;

브라우저 지원이 pretty darn good입니다. jQuery와 잘 어울립니다.