如何刪除網頁底部的空白？

Question

我正在嘗試使用Wordpress創建一個網站。 我創建了一個主題，並且我的大多數頁面都是使用頁面模板創建的，因為我想遠離博客外觀。

在我以縱向模式在ipad上查看該網站之前，一切看起來都很不錯。 每頁底部都有空白。 我使用了Chrome Canary開發人員的工具，但找不到導致絲毫空間的元素。

我在論壇上搜索了幾天，並嘗試了可以​​幫助其他人解決該問題的解決方案。 到目前為止沒有運氣。

我嘗試使用類似以下的媒體查詢：

 @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;
 }

當我在ipad上處於縱向模式時，每頁底部仍有巨大的空白。

請幫助我找到解決此問題的方法。 這是指向我的網站的鏈接： http : //www.davidsdrift.com/

謝謝你的幫助。

Answer 1

如果您的網站設計具有靜態高度，則任何高於該高度的瀏覽器（大多數移動瀏覽器，因為它們都是縱向的）都只會在該點停止，而不會在下方放置其他任何內容。 在那之后，瀏覽器僅默認為“無”（即空白）。

您可以設置一個簡單的背景顏色，這樣它不僅可以在設計區域（ body {background-color: #CCCCCC;} ）下默認不為白色，還可以嘗試一些更漂亮的body {background-color: #CCCCCC;} 。

或者，（吞咽）您可以完全重新調整站點的位置，以不使用靜態矩形設計。

Answer 2

這取決於您是否要將圖像填充為高度的100％，只需添加

background-size: 100% 100%;

否則，如果要填充內容，請使用百分比而不是像素來表示全高

Answer 3

從body刪除兩個background-size屬性，然后添加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

補充一下喬的答案：之所以以縱向模式在ipad上看到空白是因為背景圖像的長寬比和方向 。

對此有無數修復程序，但是它們全都取決於您要如何使用額外的空白。 您可以放大背景以覆蓋整個空間，重復背景，使用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
  }
}