아래로 스크롤 할 때 DIV를 아래로 스크롤

Question

내 사이트에서 페이지 하단에 'div'가 있어야합니다. 고정 높이가 없지만 항상 페이지 상단에서 '200 픽셀'부터 시작해야합니다.

내가 겪고있는 문제는 'div'의 내용이 매우 길면 스크롤 할 때 배경이 확장되지 않는다는 것입니다. 여기

내 코드입니다 : JSFiddle (updated)

나는 height=auto과 border=auto 작업을 시도하지만, 다음 'DIV'는 적은 내용이있을 경우 페이지 하단에 스트레칭하지 않고 스크롤 할 필요가 없습니다 하위.

업데이트 : 미스에 대한

미안 내 문제를 표현 : 나는 그것이 left=10% 및 right=10%있는 페이지의 중앙에 위치 할 필요가 있기 때문에 position: relative을 위해 'DIV'을해야합니다.

또한 JSFiddle을 업데이트했습니다.

업데이트 2 :이 문제에 대한 완벽한 해결책이없는 것 같아요

. 내가 끝낼 것 : 두 개의 'divs'를 가짐. 첫 번째 div는 페이지 콘텐츠를 가지며 콘텐츠가 적을 때 배경을 표시하지 않습니다. 다른 div는 content-div 뒤에 있으며 전혀 스크롤하지 않지만 내용이 적을 때는 div의 배경을 앞에 표시합니다.

Answer 1

상대적인 위치로 변경하면 예제 피들에서 작동합니다.

Answer 2

은 사업부의 CSS

편집에 height: auto;을 추가 내가 당신의 요구 사항을 충족 할 수 있도록 원래의 일부 '디자인'을 변경했습니다 bottom: 0;

Answer 3

제거합니다.

첫째, 여기에 내가했던 것은 내가 빨간색으로 전체 페이지 배경을 설정 한 내 jsfiddle

#top { 
    height:200px; 
    background:#FFF; 
} 
body { 
    background:red; 
    margin:0; 
    padding:0; 
} 

입니다. 흰색 바탕에 #top 높이 200px를 만들었으므로 #bottom은 상단에서 200px 떨어져 있습니다. 이제 내가 해낸 트릭은 내용이 적 으면 #bottom이 바닥을 만지지 않고 몸의 배경과 바닥이 보이지 않는다는 환상입니다.