FB-스타일의 메뉴 모음이 내 페이지의 하단에 부착 된 수평 도구 모음이 내용

Question

이 적용됩니다

.bottom_menu {position:absolute; bottom:0px; z-index:100} 

내 주 사용 (FB 페이지 상단에 미치는 바있다처럼) 페이지의 내용은 절대적으로 배치 된 div 상자 안에 있습니다.

.main_content {position:absolute; top:100px; left:75px;right:75px; z-index:100} 

문제는 내가 탭 내에서 내용의 너무 많은 라인이있는 경우, 그것은 아래로 밀어 대신 이상의 도구 모음을 표시한다는 것입니다. 있는 도구 모음이 항상 화면의 바닥에 남아 있도록

어떻게이 구조 않으며, 말하는 main_content div의 내부 내용의 마지막 줄 아래 라인 의 적어도 몇?

매우 바보 같은 질문이라면 미리 감사드립니다. 컨테이너 relative 및 absolute에 메뉴의 위치

<div class="container"> 
    <div class="content"> 

    </div> 
    <ul> 
     <li>MENU</li> 
     <li>MENU</li> 
     <li>MENU</li> 
     <li>MENU</li> 
    </ul> 
</div> 

다음 설정 위치 : :)

Answer 1

이 같은 바닥 글 메뉴 및 콘텐츠 섹션의 컨테이너를 만듭니다. 콘텐츠가 메뉴를 덮지 못하도록 메뉴로 컨테이너 높이를 padding-bottom으로 설정하십시오.

내용은 컨테이너의 높이를 늘리며 바닥 글 메뉴는 항상 컨테이너 하단에 표시됩니다.

here is demo

CSS

ul, body, htnl{ 
    padding:0; 
    margin:0; 
} 
li{ 
    list-style:none; 
    float:left; 
    margin-left:10px; 
} 
div.container{ 
    position:relative; 
    min-height:30px; 
    background:#eee; 
    padding-bottom:50px; 
} 
ul{ 
    position:absolute; 
    bottom:0; 
    height:50px; 
    width:100%; 
    background:#aaa; 
}