2013-08-01 4 views
0

헤더, 내용 및 바닥 글이 기본적으로 3 개인 divs 인 모바일 웹 사이트를 개발 중입니다. 오버플로가 있으면 머리글과 바닥 글을 고정시키고 내용을 스크롤 할 수있게하고 싶습니다. 지금 내 CSS는 : 이것은 텍스트 필드가 컨텐츠와 모바일 장치에서하지만, 완벽하게 작동고정 위치 지정

#header{ 
    top: 0; 
    left: 0; 
    height: 8%; 
    width: 100%; 
    position: fixed; 
    text-align: center; 
    text-height:font-size; 
} 

#content{ 
    top: 8%; 
    left: 0; 
    bottom: 15%; 
    width: 100%; 
    position: fixed; 
    margin: 0; 
    padding: 0; 
    overflow: auto; 
    z-index: 0; 
} 

#footer{ 
    height: 15%; 
    width: 100%; 
    position: fixed; 
    text-align:center; 
    bottom: 0; 
    left: 0; 
    z-index: 1; 
} 

키보드가 헤더를 팝업과 바닥 글도 내용 필드가 너무 작하기까지 밀어받을 때 . 어쨌든 고정시켜야하지만 텍스트를 입력 할 때 밀어 넣지는 않습니까?

답변

-2
#content{ 
    top: 8%; 
    left: 0; 
    bottom: 15%; 
    **width: 100%;** 
    position: fixed; 
    margin: 0; 
    padding: 0; 
    overflow: auto; 
    z-index: 0; 
} 

강조 표시된 텍스트를 px 값으로 변경하십시오. % 값은 브라우저 크기에 따라 개체를 조정합니다.

+0

하는 데 도움이

희망을 zepto.js : 더 나은 (작은 때문에) jQuery를 사용하여 수행하거나, 모바일 될 수있다. 높이를 변경해야합니다. 높이 대신에 px 값을 %로하면 화면 크기가 다른 여러 장치에서 제대로 보이지 않습니다. –

1

당신은 단지 웹 사이트가 작아진다는 사실 때문에, 자바 스크립트에게 텍스트 필드의 이익 초점 모든 시간을 사용하여 바닥 글을 숨길 수는 하드 코딩 (키보드를 표시하기위한 책임이있다) 운영 체제

이 할 수있는 저를 돕기 위해 아무것도 할 것 폭을 변경