모바일 상단하단 고정 레이아웃

모바일 코딩시에 상하단 고정된 레이아웃으로 코딩을해야할때가있다. 

방법은 여러가지이지만 탭기능같은게 있다면 아래 레이아웃이 편리할것같은부분,,

css :

* {margin:0;padding:0;}
ul { margin:0; padding:0; list-style:none; }
ul li { height:40px; border:1px solid #000; text-align:center; }
#h,#f {
	font-size:20px;
	text-align:center;
	background-color:#c27b00;
	color:#f3f3f3;
	font-weight:bold;
	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
	line-height:45px;
	opacity: 0.6;
}
#h { position:absolute; width:100%; height:80px; }
#c { position:absolute; width:100%; top:80px; bottom:50px;
overflow-y:scroll; overflow-x:hidden;-webkit-overflow-scrolling:touch; }
#f { position:absolute; width:100%; bottom:0; height:50px; }

html :

Web App Template

	

		
내용
		
내용
		
내용
		
내용
		
내용
		
내용
		
내용
		
내용
		
내용
		
내용
		
내용
		
내용
		
내용
		
내용
		
내용
		
내용
		
내용
	

Some Footer Content

상단엔 모바일 뷰포트 메타태그 넣어주고,,

테스트해보면 아래와같다.

※ 참고
원래 모바일에서 볼대 저 스크롤영역의 스크롤링이
페이지가아닌 div의 스크롤이라 뻑뻑했엇는데,
css부분에 -webkit-overflow-scrolling:touch;를 넣어주니 부드럽게 되었다.