將div填充到視口高度可在Chrome（而非Firefox）中提供額外的空間

Question

請訪問 Firefox和Chrome瀏覽器中的http://workbench2.axaumzug.ch/ 。 從實時示例和圖像中可以看出，Chrome似乎以某種方式在底部或整個頁面上添加了額外的空間。

我研究了如何使div擴展到視口的底部。 參考在源中。 尚未在Safari中測試。 似乎可以在Firefox中正常工作。 我在做什么錯或者這是一個錯誤？

有沒有一種方法可以通過某種方式通過jQuery在Chrome的底部沒有空間來實現此目的？ 我目前正在調查http://api.jquery.com/outerHeight/以查看是否可以解決問題。 如果您有任何想法或可以確認這是一個錯誤，請告訴我。

編輯：

為了使這一點更清楚易懂，這里是第三幅圖像，直接比較了Firefox和Chrome。 如您所見，Firefox在滾動條和底部之間沒有空格，而Chrome確實有一個空格，並且該空間實際上也根據Chrome瀏覽器窗口的大小而改變。

當我從正文和選項卡上刪除邊框時，Firefox恰好位於頁面底部，帶有滾動條，而Chrome則不然。 來源是相同的。

Chrome為什么要在網站底部增加額外的空間？ 這個空間是從哪里來的？我該如何純粹在Chrome中解決這個問題？

我希望現在100％清楚我要問的內容或我要理解的內容。

正如TimPalmer所說的那樣，似乎增加了68px的高度。 無論是否有標題或其他元素，都會發生這種情況。 這正是我要說的重點。 有人知道Chrome為什么要這樣做嗎？ 當在jQuery中使用outerHeight（true）而不是height時，是否可以解決這個問題？

Answer 1

嘗試：

headingSpace = 68;
windowHeight = ($(window).height()) - headingSpace);
$('#content-wrapper').css('min-height', windowHeight);

您需要將＃content-wrapper的高度偏移兩個標題的高度。 會有更優雅的方法，例如將標頭包裹在div中並測量該div，但這至少可以幫助您

Answer 2

不是100％地確定您要做什么，而是CSS技巧來使div變為屏幕的整個尺寸，這是這樣的：

.myDiv{
   position: absolute;
   Top: 0px;   
   bottom: 0px;
   right: 0px;
   left: 0px;
   overflow: auto;
}

Answer 3

Chrome確實添加了額外的空間，無論元素是否位於導航選項卡上方，也無論$（window）.height（）函數如何。 記住，它一直在Firefox中運行。

由於代碼使用HTML5標簽，因此我只添加了HTML5 Doctor CSS重置http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/#the-scripts ，並且現在無需更改$（ window）.height（）函數，並且無論是在Firefox還是Chrome中，導航欄上方是否都有其他元素。

現在，當您單擊任何選項卡鏈接時，選項卡的內容不足以到達視口的底部時，在Firefox和Chrome瀏覽器中，所有選項卡的內容（窗格）首先都會很好地擴展到視口的底部。最后，Chrome的滾動條底部和視口底部之間沒有一個像素的剩余空間。

這是需要重置的Chrome默認樣式的問題。 在整個過程中，代碼/邏輯都很好。 我應用的唯一更改是scrollTop：$（'。li-nav'），因此它實際上直接向上滾動到導航選項卡的頂部，而不是在其上方保留1個像素空間。

在被IMO研究，記錄下來的問題，圖片和實時示例以及許多工作投票否決之后，我很高興看到自己可以自己整理這些東西。 感覺不錯！ 感謝您的輸入TimPalmer！

對於選民而言，下次您投下反對票時，請閱讀該問題，如果不明白，請查看源代碼，示例和圖像，而不僅僅是單擊按鈕。