배경색/배경 이미지 아래쪽이 모바일 사이트에서 자르다

Question

비슷한 질문에 대한 답변을 통해이 문제에 도움이 된 답변이 없습니다. 내 배경 이미지가 뷰포트 하단에서 잘리고 있습니다. 배경 이미지를 제거하고 단색을 배경으로두면 같은 일이 발생합니다. 모바일 페이지의 텍스트를 볼 수 있으며 배경이 잘립니다.

Chrome의 기기 모드를 iPhone 6으로 사용하여 복제 한 사이트를 봅니다. 이 문제에 대한 도움을 주시면 대단히 감사하겠습니다!

Dev site

Answer 1

귀하의 content 요소는 그 부모의 높이의 그것을 100 %를 만드는 height:100%로 설정됩니다. 그것은 그 안에 1000px의 높이 요소를 맞추기에 충분히 키가 크지 않습니다. 일반적으로 요소는 해당 내용을 포함하도록 확장되지만 사용자의 height 특성은 해당 동작을 재정의합니다.

content 또한 position:absolute; 일 필요는없는 것처럼 보입니다. 그것은 크기 조정 문제를 돕지 않습니다. 그리고 또한 .page 요소에 인라인 스타일 height: 1000px을 제거

div.content { 
    position: absolute; 
    top: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 

:

나는 제거한다.