2014-12-25 3 views
2

스켈레톤을 기반으로하는 내 웹 사이트에 "끈적한 바닥 글"을 추가하려고하는데 제대로 작동하지 않습니다. 나는이 웹 사이트의 지시에 따라 이것을하고있다 : http://www.cssstickyfooter.com/using-sticky-footer-code.html. 크롬에서는 세로 스크롤 막대가 나타나는 페이지 높이에서 두 개 이상의 추가 픽셀을 얻습니다. IE에서는 기본 컨테이너가 왼쪽 정렬됩니다.스켈레톤 기반 웹 사이트의 고정 바닥 글

스켈레톤을 기반으로 올바르게 구현해야하는 이유는 무엇입니까? 데이브 감사합니다.

+2

데모를 보여줍니다. 우리는 텔레 패스가 아닙니다. – knitevision

+0

http : //jsfiddle.net/8w5pd9n5/... Heres 데모 –

+0

푸터 스티커를 만들고 싶습니다 ... 그리고 반응 –

답변

1

jQuery를

$(document).ready(function() { 
    var footerHeight = $('.footer').height()+30; // "+30" footer on to add space 
    $('body').css('margin-bottom',footerHeight); 
}); 

CSS는

html { 
    position: relative; 
    min-height:100%; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    padding: 10px; 
    color: white; 
    background-color: #7bbc42; 
} 
3

나는 located here는 지금에 죽은 - 간단한 순수 CSS 솔루션을 개발했습니다. 이 솔루션은 Skeleton 2.0.4를 기반으로하며 기본적으로 헤더/본문 용으로 하나, 끈적 인 바닥 글용으로 두 개의 별도의 골격 컨테이너/행 스택을 만드는 것으로 구성됩니다.

+0

예. 당신이 upvote 수 있으며, 당신을 위해 잘 작동하는 경우 대답을 받아들입니다. ;) –

+0

우수 답변, 완벽하게 작동합니다! – ChrisLo

0

사용자가 페이지 맨 아래로 스크롤하려고하는 경우에만 바닥 글을 보려는 경우 바닥 글 위에있는 모든 것을 최소 높이가 100vh 인 단일 div에 넣으십시오 '.