끈적한 푸터 크롬이 동적 콘텐츠에서 작동하지 않습니다.

최근 Google Chrome의 일부 버전에서는 내용이 스크립트로 생성 될 때 나침반에서 사용되는 고전적인 CSS 전용 끈적 푸터 솔루션이 작동하지 않는 것으로 나타났습니다. 바닥 글은 아래로 이동하는 대신 내용을 덮습니다. 창의 크기를 조정할 때 레이아웃이 바뀌도록 바뀝니다.끈적한 푸터 크롬이 동적 콘텐츠에서 작동하지 않습니다.

모든 아이디어를 어떻게이 문제를 해결하는 : 나침반의 CSS/HTML이 솔루션을 기반으로 다음 HTML을 http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
} 
.footer, .push { 
height: 4em; 
}

에 제공?

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

출처

2012-07-18 Samuel Hapak

비슷한 문제가 있습니다. 그것은 크롬 버그 인 것 같다. 'window.resize'에서 크롬은 버그가있는 꼬리말을 다시 채 웁니다. – HaNdTriX

난 당신이 나뿐만 아니라이 문제를 가지고이 링크

http://css-tricks.com/snippets/css/sticky-footer/

출처

2012-07-18 06:10:09 Prashobh

문제가 해결되지 않습니다. –

이 하나를 시도해보십시오. 도움을 받으실 수 있습니다. http://stackoverflow.com/questions/9385313/sticky-footer-or-rather-content-doesnt-stretch-down-to-footer – Prashobh

http://stackoverflow.com/questions/ 42294/footer-to-a-the-bottom-of-a-web-page – Prashobh

html,body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
p { 
    margin-top:0; 
} 
.push{ 
    height:4em; 
} 
.wrapper { 
    position:relative; 
    z-index:1; 
    margin:0 auto; 
    min-height: 100%; 
    height: auto; 
} 
.footer{ 
    position:relative; 
    z-index:2; 
    height: 4em; 
    margin-top:-4em; /*!!!*/ 
}

출처

2012-07-18 06:21:20 Jane

나는 100 % 트릭을 기반으로하는 CSS 솔루션이 많이 있다는 것을 안다. 문제는 크롬에서 동적으로 생성 된 콘텐츠의 경우 아무도 작동하지 않는다는 것입니다. –

을 clear:both

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

를 추가하거나 시도한다고 생각합니다. 동적 테이블이 겹쳐지고 있었지만 다른 페이지는 하나도 없었습니다. 이 솔루션은 나를 위해 일했습니다.

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto;  /*!! margin: 0 auto -4em; !!*/ 
}

출처

2014-09-11 21:37:21

끈적한 푸터 크롬이 동적 콘텐츠에서 작동하지 않습니다.

답변

관련 문제