레이아웃 고정 폭, 고정 바닥 글이있는 전체 높이, 전체 너비

Question

레이아웃에 도움이 될 수 있습니다.

• 헤더는
• 바닥 글 하단에 항상하고 (100 % 전체 너비가 높이를 고정했습니다 여기

  은 사양입니다 : 이것은 내가 달성하기 위해 노력하고있어입니다)

• 콘텐츠의 너비는 고정되어 있습니다.
• 콘텐츠의 높이는 기본적으로 바닥 글에서 마이너스이지만 바닥 글은 정확히 20px로 겹칩니다.

물론이 내용은 뷰포트보다 짧거나 길 때 효과적입니다. 몇 시간 동안이 문제를 해결해 봤지만 모든 기능을 수행 할 수는 없습니다.

나는 여기에 대한 바이올린을 만든 : http://jsfiddle.net/Sq4Pk/6/

이 솔루션의 문제점은 다음과 같습니다

• 뷰포트 가져 짧은이, 더 많은 컨텐츠가 바닥 글을 중복 (정확히 20 픽셀이어야 함)
• 컨텐츠 부분은 뷰포트

이 가능하다조차를 기입하지 않습니다? 누군가가 나를 도와 줄 수 있습니까?

나는 그 이러한 솔루션 및 변형을 시도했지만 모두 내 유스 케이스에서 약간 다릅니다 :

• http://peterned.home.xs4all.nl/examples/csslayout1.html
• http://www.cssstickyfooter.com

감사합니다 어떤 도움을 많이!

크리스

Answer 1

나는 가짜 오버레이에 바닥 글이 개 추가 된 div를 삽입, 가능한 해결 방법으로 바이올린을 만들었습니다.

하나의 성가신 단점 : Chrome에서 가장 높은 div (드롭 섀도우를 마스킹)가 크기 조정시 1 픽셀 이동하는 것으로 보입니다. FF + IE는 괜찮습니다.

http://jsfiddle.net/Sq4Pk/3/

편집 : http://jsfiddle.net/Sq4Pk/4/

EDIT2 : 크롬에서 픽셀 변화에 대한 수정을 발견하거나 jQuery를 사용하는 옵션 인 경우에, 결과는 조금이라도 더 : http://jsfiddle.net/Sq4Pk/5/