2016-08-15 3 views
0

나는 현재 작업하고있는 사이트가 있습니다. 꼬리말을 페이지 아래쪽에 붙여야합니다. 바닥 글이 맨 아래에 있지 않은 이유

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
    position: relative; 
    padding-bottom: $footer-height + $footer-margin-top; 
} 

.footer { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    height: $footer-height; 
} 

은 시작에서 일 듯 : 그래서 나는 기본적으로 이런 짓을하는 간단한 가이드를 따라 갔다. 그런 다음 내용이 뷰 포트 높이 이상인 무대에 도달했습니다. 즉 작업이 중단 된 순간입니다.

this을 보면 바닥 글이 페이지 하단에 있음을 알 수 있습니다.

그러나 this을 보면 바닥 글이 뷰포트 하단에 있습니다. 이것이 간단한 해결책이라는 것을 알고 있지만 그것을 이해할 수는 없습니다. 다른 사람이 나에게 제발 도와 줄 수 있어요.

+0

변경'위치 : 위치 '에 .footer''에 대한 absolute'는 : fixed' –

+0

https://codepen.io/cbracco/pen/zekgx 는 것 링크에서보세요 excatly 무엇 당신이 원해요! –

+0

Sanket, 내가 따라온 정확한 튜토리얼이지만 어떤 이유로 든 내 사이트에서 작동하지 않았습니다. – r3plica

답변

2

position: fixed에 대한 position:absolute?

그렇다면, 당신은 더 이상 100% 설정이 min-height 규칙에 있다면, 그것은 고려하고 바닥을 향해 바닥 글을 밀어있어 몸 태그에 height: auto;을 설정, 그래서해야한다.

의도 한 동작인지 알려주세요.

+0

그래, 그게 내가 원하는거야. 나는 그것이 간단 할 것이라는 것을 알고 있었다 : – r3plica

+0

아주 작동하지 않는다. html이 auto로 설정된 경우 내용이보기 영역보다 클 경우 맨 아래에 바닥 글을 넣습니다. 내용이보기 영역보다 작 으면 내용의 맨 아래에 있습니다 (보기 영역의 맨 아래에 필요함) – r3plica

+0

바닥 글이 뷰포트의 맨 아래에있는 것을 말하고 있습니까? 클라이드는 이미 그것을 대답했다. .footer 고정 위치가 필요합니다. – Vcasso

1

변경 당신은 body의 내용은 당신이 스크롤 후 나타나는 충분히 큰 경우를 제외하고 바닥 글은 페이지 하단에 부착 할 .footer

0
.footer { 
    position: static; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    height: $footer-height; 
} 
관련 문제