如何刪除HTML頁面底部的多餘空間？

我有它的結構是這樣的一個HTML頁面 -如何刪除HTML頁面底部的多餘空間？

<html> 
    <head>...</head> 
    <body> 
    <div id="header">...</div> 
    <div id="in-body">...</div> 
    <div id="footer">...</div> 
    </body> 
</html>

我的目標是使#header & #footer靜在頂部&底部的頁面，分別，但總是有#footer後留下一定的空間，。

我想如果添加％height S中div S的會給100%，我可以覆蓋整個body區域，但仍即使現在我使用的height的(18 + 75 + 3)% = 96%，仍有一定空間後離開#footer。

的CSS因爲這是 -

html { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

body { 
    height: 97.9%; 
    margin: 8px 8px 0px 8px; 
} 

#header { 
    height: 18%; 
    margin: 0; 
} 

#in-body { 
    height: 75%; 
    margin: 0; 
} 

#footer { 
    height: 3%; 
    margin: 0; 
}

我從Chrome的開發者工具檢查有沒有多餘的margin或padding任何地方。

如果我嘗試添加100%，會出現一個滾動條，但仍有剩餘的空間，它不屬於任何元素（來自Chrome開發人員工具），甚至不是html，但它仍然存在。

我用body-height: 97.9%，因爲我只想要所有可見的html-height沒有溢出。

我已經在IE11，Chrome 50和Firefox 46中檢查過了，它在所有方面都是一樣的。

保持html { overflow: hidden }將其隱藏在IE瀏覽器& Firefox中，但未在Chrome中隱藏。

這是什麼造成的？除了使用overflow來刪除它嗎？

如果我在任何地方我的方法錯了，請隨時糾正我。

Here的完整代碼。

謝謝。

編輯：我測試了上面提到的代碼，每個標籤有不同的bg顏色，它工作正常。所以，這是我的代碼造成的麻煩。請幫幫我。

來源

2016-04-28 PalashV

'體{填充：0; }'。您的底部邊距爲零，但不是填充。 –

正如我寫的，在任何引起這個問題的元素中沒有額外的'padding'或'margin'。我已經檢查過他們所有人。 – PalashV

你可以添加一個工作示例嗎？你沒有說出所有的事實。當你從'html'和'body'標籤中刪除填充和邊距時，你將不會獲得空間。我認爲你有更多的代碼衝突。分享一個工作小提琴（例如stacksnippets或jsfiddle.net）來重現問題，我們會看到有什麼問題。 –

您可以使用CSS3中的calc（）方法確保在使用％和px時沒有區別。

使你的身體類可以是：

body 
{ 
    height: calc(100% - 8px); 
    margin: 8px 8px 0px 8px; 
}

來源

2016-04-28 07:58:22 niandrei

謝謝，但這並不能解決我的問題。 – PalashV

不應該是100％ - 8px？ – Pete

@Pete Yup，因爲'8px'屬於'margin-up'以從'100％'中移除。 – PalashV

如何刪除HTML頁面底部的多餘空間？

回答

相關問題