모바일 웹킷 브라우저의 페이지 하단에 꼬리말을 고정시키는 순수한 CSS 전용 솔루션이 있습니까?

모바일 웹킷 브라우저의 하단에 바닥 글을 고정시키는 순수 CSS 전용 솔루션이 있습니까?모바일 웹킷 브라우저의 페이지 하단에 꼬리말을 고정시키는 순수한 CSS 전용 솔루션이 있습니까?

특히 iPhone 및 Android 브라우저.

2011-04-23 Jitendra Vyas

#footer { 
    position: fixed; 
    bottom: 0; 
}

jsFiddle.

iOS5 이후로 작동합니다.

출처

2011-04-23 06:21:51 alex

는 아이폰 및 안드로이드 브라우저에서 사용할 수 있습니까? –

@Jitendra 방금 iPad에서 테스트하려고 시도했지만 jsFiddle의 * 결과 * 창은 완전히 확장되었습니다 (즉, 스크롤바 없음). – alex

참고 : Boris가 아래에서 설명한 이유 때문에 대부분의 모바일 브라우저에서 작동하지 않습니다. 그러나 최신 iPad에서 작동합니다. – jsims281

아니요. 이러한 브라우저는 실제로 스크롤을 사용하지 않습니다. 그들은 무한한 캔버스에 문서를 배치 한 다음 그 문서를 가로 질러 이동합니다. 어느 정도 의미있는 족제비 - 말씨는 실제로는 position: fixed을 지원하지 않는다고 말합니다.

출처

2011-04-23 07:18:05

:(그렇다면 CSS에서 트릭을하지 마라. –

내가 아는 바가 없다. –

사용 인 flexbox :

<body> 
    <div id="mainPart"></div> 
    <footer></footer> 
</body 

<style> 
body { 
    display: -webkit-box; -webkit-box-align: stretch; -webkit-box-orient: vertical; 
    display: -moz-box; -moz-box-align: stretch; -moz-box-orient: vertical; 
} 

#mainPart { -webkit-box-flex: 1; -moz-box-flex: 1; position: relative; z-index: 2;} 
footer{ 
     background-color:#FFC579; 
     height:50px; 
     position: relative; z-index: 3; 
}

출처

2011-05-03 11:15:52 Shelomo

flexbox와 관련된 문제, 즉 box- *에서 flex- * 로의 변경 사항과 여기에서 다룬 다른 문제를 알고 있어야한다. http : //oli.jp/2011/css3-flexbox/ 이것이 좋은 사용이지만, 실제로 물건을 내놓는 지배적 인 방법이되지 않기를 바란다. –

나는 동의하고, 적어도이 점을 믿지 않는다. 기술은 데스크톱 브라우저의 다른 페이지 레이아웃 기술을 대체 할 것입니다. 위의 예와 같은 간단한 모바일 레이아웃에서는 잘 작동합니다. 주류 레이아웃의 경우 OCSSS의 간단한 그리드와 인라인 블록이있어 레이아웃 문제가 거의 없습니다. – Shelomo

플렉스 박스는 90 % 이상의 브라우저 시장 점유율을 지원합니다. –

모바일 웹킷 브라우저의 페이지 하단에 꼬리말을 고정시키는 순수한 CSS 전용 솔루션이 있습니까?

답변

관련 문제