콘텐츠 컨테이너가 100 % 인 끈적 끈적한 CSS 바닥 글 나는 끈적 끈적한 바닥 글이 기술을 사용하고

Question

는 : http://ryanfait.com/sticky-footer/

는 또한 바닥 글을 캡슐화 전체 사이트 주위에 테두리를 만들고 싶었하지만 전체 페이지 주위에 통과했지만 이것으로 끝났다 : http://i.imgur.com/jy9vN.jpg

흰색 상자가 어떻게 바닥 글로 이동하지 않는지주의하십시오. 나는 이전에 바닥 글이었다 실현하지 비슷한 질문을했고 나는 그것이 높이라고 말해 대답을 가지고 * http://jsfiddle.net/hc3Xu/14/

: 여기

는 jsfiddle이 문제를 보여주고있다! 자동 중요합니다; contentcontainer의 원인이되는 컨테이너 클래스에서 100 %로 확장되지 않습니다. 그러나이를 제거하면 바닥 글이 페이지 아래쪽에 설정되지 않은 문제가 발생합니다. 그래서 나는 어떻게 진행해야 할지를 알 수 없다.

Answer 1

대신 :

이

.container {min-height:100%; height: auto !important; height:100%; 
      margin: 0 auto -30px; width:980px; 
      background:URL(images/bg_sides.jpg) repeat-y #f4f4f4;} 

이 같은 시도 :

.container {min-height:100%; height: auto !important; 
      margin: 0 auto -30px; width:980px; 
      box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px; 
      -webkit-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px; 
      -moz-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;} 

을 당신은 다음 또한 contentContainer div의 라인에 가져옵니다 바닥 글의 왼쪽과 위쪽 여백을 조정할해야합니다 .

http://jsfiddle.net/z5geM/

Answer 2

http://jsfiddle.net/hc3Xu/16/

나는 당신의 html 요소에 배경 이미지를 가지고있는 요소를 조금 변경했습니다과 body 메인, 중심 내용 영역합니다. 경계선을 지정하고 상자 크기를 변경함으로써 100 % 높이를 유지하면서 외부에 회색 테두리를 만듭니다. 꼬리말의 위치를 ​​약간 조정하여 20 또는 그 이하의 픽셀을 움직이면 몸의 회색 경계선 내에 일렬로 나타납니다.

호프가 도움이 되었기를 바랍니다. 왜 이것이 작동하는지 자세히 설명해 주시겠습니까?