div id = "content"에 충분한 내용이없는 경우 빨간색 래퍼는 100 %를 채 웁니다. 그러나 내용이 길어지면 빨간색 래퍼가 100을 채우지 않습니다 화면 높이와 콘텐츠 div가 오버플로됩니다.CSS 래퍼 div 높이 : 100 % 전체 페이지 높이를 포함하지 않음
코드 : 여기 http://codepen.io/anon/pen/JAbuq
는 보여 재 크기보다 작은 높이 브라우저로 이미지이다. 모바일 브라우저 디스플레이에이 기능이 필요합니다.
사용 min-height: 100% 대신 height: 100%의 래퍼가 브라우저의 뷰포트의 높이를 초과 할 수 있도록합니다 :
#content-wrapper {
width: 100%;
float: none;
position: absolute;
box-shadow: none;
overflow: visible;
min-height: 100%;
background: red;
}
콘텐츠 - 래퍼가 100 %이기 때문입니다 WINDOW의 크기가 아니라 내용. 내용이 창보다 크면 래퍼 너머로 유출됩니다.
변경 높이가 최소 높이를하는 #content-wrapper에서이 문제를 해결할 수 :
흰색 컨테이너를 때문에 패딩과 마진의 간다. 본문에는 초기 마진이 있습니다. 나는 그것을 바꿨다, 여기에서 보라 http://codepen.io/anon/pen/eiocy/
내용은 * 창 높이의 * 100 %이다. 스크롤하면 창 높이의 100 %를 지나서 스크롤됩니다. – geoff