IE와 firefox에서 작동하는 CSS 바닥 글

Question

안녕하세요 여러분, 저는 CSS 바닥 글을 추가하려하지만 제대로 작동하지 않습니다. 지금은 미친 듯이 조정 중이 야. 파이어 폭스에서 괜찮아 보인다면 인터넷 익스플로러 7에서 엉망이된다. 때때로 CSS 페이지의 중간에있다. (CSS 기반 바닥 글에 대해서는 좋은 예제가있다.)

내 페이지가 고정 폭, 다양한 높이의 2 열이 내 글이 100 % 폭을 가지고 고려 그대로

---

그럼 내가 CSS는 끈적 끈적한 바닥 글을 사용하고 있습니다 -.에서 잘 작동하는 것 같다 파이어 폭스하지만 IE에서 내 바닥 글이 페이지의 중간에 떠 다니고 있습니다. 브라우저 바닥 뷰포트 높이의 바닥에 내 바닥 글이 있습니다. IE의 높이를 100 %로 해석하는 방법이 생각납니다. CSS 끈끈한 바닥 글이 작동합니다. 그 자체만으로도 괜찮지 만 내가 우레처럼 내 수정 및 추가 IE에서 엉망이 가져옵니다. 바닥 글 및 헤더에 대한 기본 코드는 이렇게이다 :

@charset "utf-8"; 
/* CSS Document */ 

html, body, #wrap {height: 100%;} 
body > #wrap > #main > #pageContent {height: auto !important; min-height: 100%;} 

#main 
{ 
    background-color:#FFFFFF; 
    width:960px; 
    height:100% !important; 
    text-align:left; 
    position:relative; 
} 

#footer 
{ 
    display:block; 
    width:100%; 
    text-align:center; 
    position: relative; 
    height: 150px; 
    clear:both; 

} 
/* CLEAR FIX*/ 
.clearfix:after 
{ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.clearfix 
{ 
    display: inline-block; 
} 
/* Hides from IE-mac \*/ 
* html .clearfix { 
    height: 1%; 
} 
.clearfix 
{ 
    display: block; 
} 
/* End hide from IE-mac */ 

그리고 HTML 내가이 CSS Sticky Footer을 시도 할 것

Answer 1

나는 그것을 정리했다 - 어떤 이유로 두 가지 명확한 예가있다. 두 가지 모두 문제를 일으키는 것이 보이지 않지만 중복 된 항목을 제거하면 해결된다. 하나는 해결할 수없는 이상한 해결책이다. 어떤 의미가있는 것처럼 보입니다. 어쨌든 고마워.

Answer 2

그것을 엉망으로하고있는 곳

<div id="wrap"> 
<div> header is here</div> 
<div id="main" class="clearfix">content is here </div> 
</div> 
<div id="footer"></div> 

처럼 다소이다.

Answer 3

코드를 보지 않고 말할 수는 없지만 2 열 레이아웃을 사용하면 적어도 하나의 열이 떠있었습니다. 바닥 글에 style = "clear : both"를두면 페이지의 맨 아래로 가야합니다.

Answer 4

그것은 당신이 달성하려고하는 것에 달려 있다고 생각합니다. 하나 이상이 있다고 추정,

#footer {clear: both; 
     } 

이 의지는 적어도 열 긴 아래 바닥 글을 밀어 : 내가 가진 첫 번째 제안은 사용하는 것입니다. 이 꽤 자기 설명이다

#footer {position: absolute; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     } 

하지만, 본질적를 첨부합니다

두 번째 제안, 나의 선호하는 솔루션 (I 크로스 브라우저/OS 호환성에 대한 확실하지 않다 염두에 베어링)이며, 바닥 글을 페이지 아래쪽에 배치하고 내용에 따라 #footer을 조정할 수도 있습니다. 즉, #footer은 100 % 너비 (픽셀을주고 받음)이므로 디자인에 따라 조정하십시오.