html5에서 footer가 떠다니는 버그 IE7

IE7에서만 바닥에 있어야하는 footer가 중간에 떠 다니는 버그가 있습니다.
이 문제는 대부분 haslayout에 의한 것으로 doctype이 xhtml에서는 해결하는 방법이 있는데 유독 html5에서는 그다지 해결하는 방법이 없다.
사실 html5에서 높이가 100%로 되게 제작하려 했는데 이또한 html5에서는 방법이 없는것 같다.

여하튼 문제는 IE7에서만 유톡 하단 푸터가 떠다니는 현상을 해결해야만 했다.
어떤 방식인지는 이미지를 참고하시길 바랍니다.

제가 아는 상식과 인터넷의 힘을 빌어 사이트를 돌아다니고 돌아다닌 결과 해결을 했습니다.
이번에 제작한 스킨이 html5로 마크업이 됐기에 이것에 해당하는 해결책을 찾아야 했습니다.

일단 제가 제작한 스킨의 구조와 표현은 아래와 같습니다.

전체는 container 로 감싸고 중간에 wrapper 을 적용해서 중간에 글이 모이도록 했습니다.
스타일은 아래와 같습니다.

이표현이면 IE6을 포함한 모든 브라우져에서 정상적으로 보입니다. 근데 문제는 유독 IE7만 중간에 footer 가 떠 있었습니다.
모든 가능의 수를 해본결과 해결점은 이렇습니다.

해결책

본문을 감싸는 #main 을 높이를 100%로 해주었는데 IE7만 auto 로 해주면 됩니다.
저의경우 핵을 사용해서 아래처럼 코드 한줄이 추가되었습니다.

이처럼 간단하지만 해결법을 모를때는 정말 답답하죠.
그렇다고 doctype을 변경할 수도 없는 노릇이였습니다.
현재 어떻게 보여지는지 스샷을 첨부합니다.

참고로 하단을 항상 아래로 보이게 하는 방법중에는 본문에 해당하는 디비젼의 아래 여백을 푸터의 높이만큼주고 , 푸터의 포지션을 absolute 주고 bottom:0 으로 하면 항상 아래로 보이는 방법이 있긴 합니다.
하지만 이또한 이상하게 html5에서는 잘 안먹더군요.

여하튼 기존의 IE 버그해결책들이 html5에서는 약간씩 변경해줘야 하는 부분이 있는것 같습니다.

참고링크

Make the Footer Stick to the Bottom of a Page - 페이지의 하단에 바닥글 스틱 만들기