내 웹 페이지 하단의 공백을 제거하려면 어떻게해야합니까?

Question

저는 Wordpress를 사용하여 사이트를 만들려고합니다. 테마를 만들었고 대부분의 페이지는 페이지 모양을 사용하여 만들어졌습니다. 왜냐하면 저는 블로그에서 멀리 떨어져 있기를 원했기 때문입니다.

내 초상화 모드에서 ipad로 사이트를 볼 때까지 모든 것이 멋져 보였습니다. 모든 페이지의 맨 아래에 거대한 공백이 있습니다. Chrome Canary의 개발자 도구를 사용했지만 부 엉 공간을 유발하는 요소를 찾을 수 없습니다.

저는 며칠 동안 포럼을 검색해 왔으며 다른 사람들을 도와 문제를 해결했습니다. 지금까지 행운이 없습니다. 내 iPad에서 세로 모드에있을 때 여전히 모든 페이지의 하단에 큰 공백이

@media only screen and (min-width: 768px) and (max-device-width: 1024px) and  (orientation:portrait) and (-webkit-min-device-pixel-ratio: 1) { 

Html,body{ 
    Overflow:hidden; 
} 

:

내가 좋아하는 미디어 쿼리를 사용했습니다.

이 문제에 대한 해결책을 찾으십시오. 내 사이트 링크 : http://www.davidsdrift.com/

도움 주셔서 감사합니다.

Answer 1

두 가지를 제거 콘텐츠 사용 비율하지 픽셀을 채우기 위해 원하는 경우 다른 단지에

background-size: 100% 100%;

추가 100 % 당신의 높이를 채우기 위해 이미지를 넣어하려는 경우

Answer 2

사이트 디자인에 정적 높이가있는 경우 해당 높이보다 높은 브라우저 (대부분의 모바일 브라우저는 세로 방향이므로 브라우저가 그 지점에서 멈추고 그 아래에 다른 것을 넣지 않습니다). 그 후에 브라우저는 기본값으로 "nothing"(즉 공백)으로 설정됩니다.

단순한 배경색을 설정하여 디자인 된 영역 (body {background-color: #CCCCCC;}) 아래의 흰색을 기본값으로 설정하지 않거나 그보다 더 재미있는 것을 시도 할 수 있습니다.

또는 (꿀꺽 마심) 정적 정사각형 디자인을 사용하지 않기 위해 사이트를 완전히 재 시동 할 수 있습니다. 당신은 전체 높이

Answer 3

이 달려있다 background-size 속성은 body이고, 추가 값은 background-size: cover;입니다.

는

html { 
    min-height: 100%; 
} 

귀하의 배경과 상관없이 해상도의 전체 화면을 커버해야이 셀렉터를 추가합니다. background-position: center center;도 추가 할 수 있습니다.

html { 
    min-height: 100% 
} 
body { 
    background: url(images/homePage.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center; 
} 

Answer 4

조의 대답에 추가하려면 예 : 세로 모드에서 아이 패드에 공백을보고있는 이유 때문에 화면 비율 및 배경 이미지의 방향을이다.

많은 수정이 있지만 추가 공백으로 무엇을 할 것인가에 달려 있습니다. 배경을 확대하여 전체 공간을 덮고, 배경을 반복하고, CSS3 속성을 사용하여 거울 효과를 만들 수 있습니다.

또한

@media (orientation:portrait){ 
    html{ min-height:100% } 
    body { 
    background:url(images/homePage.jpg); 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center center 
    } 
}