화면 하단 위치 지정 모바일 CSS

Question

모바일 검색을 위해 화면 아래쪽에 고정되는 메뉴를 만들기 위해 PC에서는 작동하지만 모바일에서는 작동하지 않는 position: fixed을 사용했습니다. 저는 여기에 사용되는 코드입니다 :

.menu_bar { 
    background-color: #000; 
    text-align: center; 
    height: 75px; 
    width: 100%; 
    position: fixed; 
    bottom: 0; 
    display:block; 
    z-index: 9999; 
} 

Here's the demo 는 그리고 여기가 모바일에서 작동시킬 수없는 이유 오페라 미니 emulator

아는 사람입니까? 고마워요 :)

편집 : 대부분의 모바일 브라우저가 position: fixed을 지원하지 않는 것을 보았습니다. 좋은 대안이 있습니까? 아마 Jquery의 도움으로? 감사

Answer 1

난 단지 너무 테이블을 고정 된 위치를 제공하기 위해 생각할 수 있지만, 당신은 것입니다 그래서 더 문제를 일으킬 수 있을지는 확실하지 않다 :

table { 
    position: fixed; 
    top: 0px 
    bottom: 75px 
} 

.menu_bar { 
    background-color: #000; 
    text-align: center; 
    height: 75px; 
    width: 100%; 
    position: fixed; 
    bottom: 0; 
    display:block; 
    z-index: 9999; 
} 

을 여전히 가질 수 그래서 메뉴 막대가 고정되었지만 오버 플로우 : 스크롤을 추가해야 할 수도 있습니다. 또는 오버플로 : 자동; 내용이 스크롤되지 않는 경우. 나는 http://code.google.com/mobile/articles/webapp_fixed_ui.html을 읽고 대신 콘텐츠를 스크롤하기 위해 javascript를 사용하는 것이 좋을 것입니다.