HTML和Body Viewport問題

我在filmblurb.org上有一個網站。HTML和Body Viewport問題

當您向後滾動以製作100％CSS佈局樣式時，我的網站的頁面容器會延伸到窗口的底部，但由於某些原因，即使身體和標籤的高度均爲100％這兩個元素會在頁面的一半處停下來，然後在視口縮小時停止。當我在Google Inspect Element中分析這些元素時，我的頁面容器當前最小高度爲100％，但由於某種原因，縮小時實際上會延伸到視口的底部。

我也採取了我所看到的截圖給你一個更好的主意。在這裏，他們是[鏈接] i917.photobucket.com/albums/ad16/jtarr523/...（對身體）和

enter image description here

（用於HTML）......這兩種不延伸至底部。

有人知道如何解決這個問題嗎？

我將不勝感激。

來源

2012-05-31 jtarr523

你的意思是使用瀏覽器縮放功能（如使用cmd +「 - 」）嗎？ –

我說縮小了，但我想我的意思是當你在頁面上向下滾動時。 – jtarr523

min-height: 100%html元素意味着該元素將至少與視口一樣高。這並不意味着它會一直延伸到底部。如果向下滾動，則可能仍然能夠滾動到<html>元素的底部。

防止這種情況（缺少JavaScript）的唯一方法是確保頁面上的所有元素（即可能導致滾動條的所有內容）都保留在html元素中。一個簡單的辦法，迫使這是把你的overflow: hidden元素html上：

body { 
    overflow: hidden; 
}

如果問題是由一個浮動造成的，那麼，這將解決這個問題。如果問題是由最後一個元素上的絕對定位元素或負底部邊距引起的，那麼這會用更嚴重的問題替換您的問題：頁面將在html元素的底部被截斷。然後您必須以其他方式找到問題元素。

（同樣適用於body元素;它需要自己的overflow: hidden;，以確保沒有任何東西可以超越它）

來源

2012-05-31 06:03:32 Brilliand

+1'overflow：auto;'可能更有用，不過。 – caw

不知道到底是否會與瀏覽器縮放工作，但在我的經驗（和根據this問題），如果要將容器元素設置爲min-height: 100%，則需要將html標記height設置爲100%。

html { height: 100%; } 
body { min-height: 100%; }

將body替換爲參考您的主容器，它應該仍然工作。據我所知，將html設置爲100％沒有不良反應;它不會切斷頁面或弄亂任何其他樣式。

就像我說的，我不是100％肯定這是與你的問題有關，但它可能值得一試。

來源

2012-11-02 07:35:51

HTML和Body Viewport問題

回答

相關問題