앞의 div에 절대 위치 지정이있는 경우 하단에 바닥 글을 남겨 둡니다 (필요하지 않은 "끈적임"은 아님)?

Question

내가 CSS로

<div id="container"> 
<div id="main> 
    <div id="sidebar"></div> 
    <div id="content"></div> 
</div><!-- end main --> 
<div id="footer"></div> 
</div> 

같은 페이지 설정이 있습니다

#container { 
position: relative; 
} 
#footer { 
position: absolute; 
bottom: 0px 
} 
#content { 
position: absolute; 
} 

이 내 기본 레이아웃을 위해 작동하지만 모바일 (즉, 덜이 767 픽셀)을 위해 뭔가 크기를 조정할 때 ... 내 콘텐츠가 내 바닥 글 (및 내 컨테이너 div의 '외부') 뒤에 너무 오래 실행됩니다.

내 모바일 레이아웃에 절대적인 콘텐츠 위치를 유지해야합니다 (콘텐츠가 부분적으로 콘텐츠 위에 있고 모바일 레이아웃의 콘텐츠 아래 부분적으로 나타나는 사이드 바와 함께 수직으로 실행되도록). 그러나 절대 포지셔닝이 일반 흐름에서 컨텐트 div를 두드리고 바닥 글이 내 내용 아래로 끝나지 않는 것처럼 보입니다.

Answer 1

절대 위치 지정을 사용하지 않아야합니다. 현재 설정에서 할 수있는 것은 콘텐츠의 공급 높이이며 자동 스크롤 할 수있게 만드는 것입니다.

#content { 
position: absolute; 
height:400px; 
overflow:scroll; 
}