CSS Sticky Footer - 내용 테두리를 바닥 글까지 확장하기

Question

나는 이것에 대해 많은 질문이 있음을 알고 있지만 지금은 4 일 동안 Google을 검색해 왔지만 아무 것도 작동하지 않는 것으로 보입니다. 나는 끈적 끈적한 꼬리말을 구현하려고합니다. 즉, 화면을 채울 수있는 내용이 충분하지 않을 때 바닥 글은 화면 하단에 있고 화면을 채울 수있는 충분한 내용이있을 때 바닥 글은 해당 내용 아래에 머물러 있다는 것을 의미합니다. 당신은 아래로 스크롤합니다.

대략 15 개의 서로 다른 끈적한 푸터 솔루션을 사용해 본 결과 대부분 이론적으로 작동했지만 내 특정 상황은 계속 엉망이었습니다. 내 콘텐츠에는 왼쪽 및 오른쪽으로 바닥 글까지 이어지는 테두리가 있습니다. 푸시와 관련된 모든 것은 작동하지 않습니다.

<div id="container"> 

    <div id="header"> 
    <!--Banner goes here--> 
    <div id="nav">Navigation Links</div> 
    </div> 

    <div id="content"> 
    <p>Content Goes Here</p> 
    </div> 

    <div id="footer"> 
    </div> 

</div> 

CSS

html, body { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
} 

#container { 
    min-height: 100%; 
    position: relative; 
} 

#content { 
    padding: 20px; 
    border-left: solid 30px lightblue; 
    border-right: solid 30px lightblue; 
} 


#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 80px; 
    border-top: solid; 
    text-align: center; 
    padding-top: 10px; 

}

은 어떻게받을 수 있나요

HTML : 여기

내가 무엇을 시도했다 가장 최근의 화신 이 끈적 끈적한 바닥 글을 사용하면서도 파란색 테두리를 바닥 글까지 확장 할 수 있습니까?

Answer 1

상자 그림자를 사용하여 http://jsfiddle.net/FT8KR/을 만드는 방법은 다음과 같습니다. 픽셀 값은 다소 임의적 이었으므로 그 값을 사용하십시오. 테두리를 사용할 수도 있지만 스크롤바를 더 안쪽으로 밀어 넣는 반면 상자 그림자는 자연스럽게 푸시하지 않습니다.

#container { 
    height: 100%; 
    margin: 0 auto -80px; 
    overflow: auto; 
    padding-bottom: 80px; 
    padding: 0 30px; 
    box-shadow: inset -48px 0 0 lightblue, 
       inset 30px 0 0 lightblue; 
} 

Answer 2

body{ 
    padding-bottom: 90px 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right:0 ; 
    height: 80px; 
    border-top: solid; 
    text-align: center; 
    padding-top: 10px; 
}