인라인 블록 컨테이너를 수직으로 스트레치하는 방법은 무엇입니까?

Question

여러 화면 해상도로 홈 서버 웹 플랫폼에 대한 간단한 메뉴를 만들려고합니다.

Complete Example

#menu-area{ 
    position: absolute; 
    text-align:center; 
    margin-left: 15%; 
    margin-right: 15%; 
    width: 70%; 
    min-height: 50px; 
} 

.menu-box{ 
    display:inline-block; 
    height: 50px; 
    width: 150px; 

    font-size: 25px; 
    line-height: 50px; 
    text-align:center; 
} 

내 생각은 화면이 좁은수록, 메뉴 링크가 자신을 재 배열하고, 열에 줄에서 변환이었다. 그 부분은 의도 한대로 작동합니다.

그러나 메뉴가 세로로 두 줄 이상 길어지면 내용 표시 영역으로 덮어 쓰기 시작합니다.

메뉴 상자가있는 div를 스트레치하는 방법을 알아낼 수 없으므로 내용 영역이 푸시 다운되고 메뉴가 넘치지 않도록 할 수 있습니다.

P .: 가능한 경우이 레이아웃에는 html과 css 만 사용하고 싶습니다.

Answer 1

당신이 CSS에서이 라인을 주석 경우 - 작동 :

#head { 
/* min-height: 200px; */ 
/* height: 15%; */ 

#menu { 
/* height: 50px; */ 

#menu-area { 
/* position: absolute; */ 
/* min-height: 50px; */