태블릿이나 브라우저에 나타나는 공백 크기 조정

Question

현재 프로젝트에서 태블릿 및 모바일 버전의 사이트를 만들고 있으며 크기를 조정할 때 문제가 발생하지만 다른 크기로 브라우저에서 테스트하고 있습니다. 브라우저. http://demo1.zenithtechnosol.net/simlim/html/이

이 테스트하십시오 :

사이트의 현재 버전에서 확인하실 수 있습니다 그것은 예를 들어 태블릿에 어떻게 표시되는지 확인하기 위해 기본적으로 내가 브라우저의 크기를 조정할 때마다 http://responsivetest.net/#u=http://demo1.zenithtechnosol.net/simlim/html/|768|1024

를 공백이다 오른쪽에 렌더링되고 x 스크롤 막대가 나타납니다 (포함하는 요소의 너비가 초과되지 않았더라도).

overflow : hidden을 추가하여 문제를 해결할 수 있지만 x 스크롤을 완전히 비활성화합니다. 원하지 않는 부분입니다.

모든 주요 브라우저에서이 테스트를 거쳤습니다. 모두 똑같습니다. CSS와 관련이 있어야합니다. 정확히 무엇인지 잘 모르겠지만, 내가 그리워했던 것은 매우 간단합니다. .

도움이 될 것입니다.

Answer 1

.pad-20 {padding:20px}을 .pad-20 {padding:20px 0}으로 변경하고 body에서 overflow-y:scroll; overflow-x:hidden을 제거 할 수 있습니다.