테이블 디스플레이를 사용할 때 Firefox에서 끈끈한 바닥 글이 작동하지 않습니다.

내 웹 사이트에 this 게시물에 설명 된 끈적 인 바닥 글 기법을 사용하고 있습니다. 내 사이트의 90 %의 페이지에서 끈적 인 바닥 글이 완벽하게 작동합니다. 페이지의 다른 10 %에서 저는 Firefox에서 흥미로운 문제에 직면하고 있습니다. 기본적으로이 페이지에 나는 내가 그래서 포스트에 CSS 코드를 조정하고 수직으로 내 페이지의 내용을 중심하려는 :테이블 디스플레이를 사용할 때 Firefox에서 끈끈한 바닥 글이 작동하지 않습니다.

html, body { 
    height: 100%; 
    } 

    .wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
    display: table; /* <--- THE NEW LINE OF CODE */ 
    } 

    .footer, .push { 
    height: 4em; 
    }

이 날 세로로 단순히 할당하여 .wrapper 내부의 사업부를 중심에 있습니다 다음 클래스 : 등 사파리, 크롬에서

.table_row { 
    display: table-row; 
    vertical-align: middle; 
}

는, 끈적 끈적한 바닥 글은 페이지 하단에 배치 상태를 유지하고 내용 멋지게 수직 중심. 그러나 Firefox에서는 끈적한 꼬리말이 내용 바로 다음에 배치되어 내용이 머리글 아래의 페이지 상단으로 찌그러지게됩니다.

 <html> 
     <head> 
      <link rel="stylesheet" href="layout.css" ... /> 
     </head> 
     <body> 
      <div class="wrapper"> 
       <div class="table_row"><p>Your website content here.</p></div> 
       <div class="push"></div> 
      </div> 
      <div class="footer"> 
       <p>Copyright (c) 2008</p> 
      </div> 
     </body> 
    </html>

및 here가 JSFiddle입니다 : 여기에 HTML이 상황에서 어떻게 보이는지의 샘플입니다.

나는 CSS에서 높이, 최소 높이 등을 조정하려했지만 운이 없었습니다. 이 시점에서 나는 어떤 해결책이나 도움을 완전히 잃어 버렸기 때문에 어떤 도움이나 지침도 감사 할 만하다.

감사합니다.

출처

2014-06-12 Sloth Armstrong

height: auto !important; 줄을 제거하면 올바르게 작동합니다.

출처

2014-06-12 13:51:31 Dexa

이렇게하면 바닥 글이 페이지 아래쪽으로 다시 이동하게되지만 바닥 글의 "끈적"측면은 제거됩니다. 페이지가 스크롤되거나 창 하단을지나 확장되면 바닥 글의 위치가 잘못되어 그대로 유지됩니다. –

음, 원래 코드를 시도했는데 크롬에서도 말하고있는 "끈적 거리는 양상"이 없습니다 ... '높이 : auto! important;'와 동일하게 또는 동일하게 작동합니다 Chrome 29 – Dexa

흥미 롭습니다. Chrome에 있습니다. 35 잘 작동합니다. JSFiddle 페이지를로드 한 다음 바닥 글이 이동하지 않는 크롬 높이를 조정하면 어떻게됩니까? "페이지"는 어디에 위치해 있습니까? –

테이블 디스플레이를 사용할 때 Firefox에서 끈끈한 바닥 글이 작동하지 않습니다.

답변

관련 문제