2014-01-27 3 views
-1

페이지 하단의 고전적인 바닥 글을 얻으려고합니다. 아이디어는 콘텐츠 화면을 최대화하기 위해 머리말과 꼬리말이 고정되지 않는다는 것입니다. IE8에서는 작동하지만 다음 코드는 작동하지 않습니다. 잘못된 부분은 Firefox가 괜찮 으면서도 IE가 <footer> 아래에 공백을 남기고 있다는 것입니다. IE8에 고정하지 않고 하단에 바닥 글을 부착 할 수있는 방법이 있나요하단의 고정되지 않은 바닥 글, IE8의 고정되지 않은 머리글이있는 페이지

<body> 
    <header>...</header> 
    <div id="content">...</div> 
    <footer>...</footer> 
</body> 

:

html, body 
{ 
    height: 100%; 
} 

header 
{ 
    height: 50px; 
    margin-bottom: 22px; 
} 

#content 
{ 
    box-sizing: border-box; 
    min-height: 100%; 
    height: auto; 
    margin-top: -72px; /* To avoid white space below footer. Works in FF, but not in IE*/ 
    padding-top: 72px; 
} 

footer 
{ 
    clear: both; 
    height: 30px; 
    background: #222; 
    margin-top: -30px; 
} 

HTML 코드는 꽤 표준입니다?

P. 나는 <header><footer>에 대한 HTML5Shiv을 사용하고

나는 다른 사람의 일에 대한 크레딧을받을 수 없어 ... 그러나 이것은 그 달성에 좋은 곳입니다
+0

을하지만 그 의미 잘못되지 않을 것 ? – Eagle

+0

네, 거기에 두뇌 방구가 있고 헤더에 머리 태그가 섞여 있다고 생각합니다. 죄송합니다. – snaplemouton

답변

관련 문제