고정 머리글과 바닥 글 문제

Question

현재 960 그리드 시스템을 사용하는 웹 사이트 디자인 을 사용하고 있으며 디자인의 마지막 순간에 작은 걸림돌을 발견했습니다. 궁극적으로 페이지 머리글과 바닥 글 막대가 페이지에서 '고정'되도록 설정하여 페이지의 나머지 부분이 스크롤되는 경우에도 고정되어 있습니다. 다음은 고정 된 탐색 모음의 좋은 예입니다. http://ryanscherf.net/ 광산은 수직이 아니지만, 요점을 얻습니다.

내가 겪고있는 문제는 헤더가 완벽하게 작동한다는 것, 그리고 정확히 내가 생각하는 방식이다. 여기 내 헤더

<div id="header"> 
    <p> 
     ATS Logo 
    </p> 
</div><!--end header--> 

하고이 솔루션은 정확히 내가 너무 그것을 원하는 방식으로 작동 위치

#header 
{ 
background:grey; 
width:100%; 
height:65px; 
position:fixed 
/*padding:15px;*/ 
} 

을 스트레칭하고 해결하기 위해 CSS를위한 HTML이다. 그러나 동일한 정확한 설정을 바닥 글에 적용하면 바람직하지 않은 결과가 발생합니다. 여기 내 뜻을 나타내는 바이올린입니다. 바닥 글에 대한 '위치 : 고정'행의 주석 표시를 제거해야합니다. http://jsfiddle.net/s4cWP/ 전체 화면 내 자신의 CSS를 사용하는 것 외에도합니다 (jsFiddle의 상단에있는를!) 내가 960 리셋 그리드 및 960 12 열 스타일 시트를 사용하고 있음을 지적 그것의 가치가 http://jsfiddle.net/s4cWP/embedded/result/

.

나는 올바른 방향으로 밀고 나가는 것에 정말로 감사 할 것입니다. 여기에 대해 설명하지 않은 무언가가 있습니까?

감사합니다.

Answer 1

꼬리말이 항상 머리글처럼 나타나길 원합니다. JSFiddle.

새의 #footer :

또한

#footer 
{ 
    background:grey; 
    width:100%; 
    position:fixed; 
    bottom:0; 
    left:0; 
} 

, 중복, 나는이 #container의 하단에 패딩을 추가 인해 :

#container 
{ 
    padding-top:75px; 
    padding-bottom:30px; 
}