2012-08-30 2 views
0

IE 호환 모드에서 작동하며 크로스 브라우저 호환이 가능한 this HTML template에 스티커 풋터를 추가 할 수 있습니까?레이아웃을 유지하면서이 HTML 템플릿에 끈적한 바닥 글을 추가하는 방법은 무엇입니까?

Ryan Fait sticky footer을 추가하려고했지만 추가 할 때 모든 것이 깨지는 것 같습니다.

상위 컨테이너에서 100 % 높이를 사용하는 고정 바닥 글을 사용한 다음 바닥 글에 음수 상단 여백을 사용하고 배경색을 볼 수 없게하므로 뷰포트로 다시 끌어 올 수 없습니다 꼬리말과 주요 내용 사이. 템플릿에 둥근 모서리를 사용하기 때문에 백 그라운드 색 간격 div를 삽입 할 수 없으므로 어려울 수 있습니다.

나는이 'top border soak up sticky footer'과 비슷한 Ryan Fait 메서드를 시도했지만, 그 중 하나는 작동하지 않을 것입니다.

+1

그냥 body make padding에서 0을 제거하고 바닥 글에서 margin-top을 0으로 만드십시오. #footer를 제거하면 –

+0

{margin-top : 10px; ...}는 div (기본 및 바닥 글) 사이의 간격을 축소하고 레이아웃을 나눕니다. – johntrepreneur

+0

@johntrpreneur 그래서 두 개의 링크와 콘텐트가 작고 푸터는 페이지를 채우는 것과 같다. 원하는 경우 제거하면 디자인과 유사하게된다. –

답변

0

해결되었습니다. 기본적으로 Ryan Fait 끈적한 바닥 글을 적용하여 다음과 같이했습니다.
- 바닥 글을 래퍼 외부로 이동하고 래퍼 내부의 머리글을 이동했습니다.
- 몸에서 패딩을 제거했습니다.
- 바닥 글에서 위쪽 여백, 아래쪽 테두리, 상자 그림자 및 아래쪽 둥근 모서리가 제거되었습니다.
- 꼬리말의 위쪽 테두리를 설명하기 위해 여분의 픽셀 (.063em)까지 래퍼 여백을 가져옵니다.
- 아연 부가 바닥 : 10px; #innerwrap을 사용하여 찾고 있던 div 간격을 가져옵니다 (Ryan Fait 페이지에서 말하는 것처럼).
- 바닥 글의 너비와 여백을 래퍼와 일치시킵니다.