드롭 다운 메뉴 나누기 고정 바닥 글

Question

동적 콘텐츠가 & 인 바닥 글이 있으므로 바닥 글 표 버전을 사용하고 있습니다. 문제는 페이지가 너무 작거나 메뉴가 너무 커지면 바닥 글을 넘어서 펼쳐지는 절대 배치 된 드롭 다운 메뉴가 있다는 것입니다. 이렇게하면 바닥 글 아래에 간격이 생깁니다. 예를 들어 바이올린을 확인하십시오. 감사. http://jsfiddle.net/wmTn9/

여기에 CSS가 있지만, 피들을 더 쉽게 볼 수 있습니다. 당신의 CSS에서

html, body { 
    height: 100%; 
    margin: 0; 
} 
.wrapper { 
    display: table; 
    height: 100%; 
    width: 100%; 
    background: yellow; 
} 
.content { 
    display: table-row; 
    height: 100%; 
    background: turquoise; 
    position:relative; 
} 
.menu { 
    position:absolute; 
    left:0; 
    width:50%; 
    background:yellow; 
    overflow:hidden; 
    max-height:20px; 
} 
.menu:hover { 
    max-height:1000px; 
} 
.menu li { 
    height:800px 
} 
.footer { 
    display: table-row; 
    background: lightgray; 
} 
.footer:hover h3 { 
    height:300px; 
} 

Answer 1

, 메뉴 클래스에서 position:absolute;를 가지고 바닥 글은 긴 메뉴를 수용하기 위해 아래로 이동합니다. 바닥 글이 브라우저 창 하단에 유지하려면,

width:100%; 
position:fixed; 
bottom:0; 

position:absolute;

는 문서 흐름에서 요소를 걸립니다 ... 바닥 글 클래스에 다음을 추가합니다. 그런 다음 요소는 첫 번째로 배치 된 (정적이 아님) 조상 요소를 기준으로 배치됩니다. 메뉴 클래스를 가져 와서 메뉴를 문서 플로우에 다시 넣고 바닥 글이 겹치는 메뉴를 중지합니다.

Amended Fiddle with footer stuck to the bottom of the browser window