如何删除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颜色，它工作正常。所以，这是我的代码造成的麻烦。请帮帮我。

'体{填充：0; }'。您的底部边距为零，但不是填充。 –

正如我写的，在任何引起这个问题的元素中没有额外的'padding'或'margin'。我已经检查过他们所有人。 – PalashV

你可以添加一个工作示例吗？你没有说出所有的事实。当你从'html'和'body'标签中删除填充和边距时，你将不会获得空间。我认为你有更多的代码冲突。分享一个工作小提琴（例如stacksnippets或jsfiddle.net）来重现问题，我们会看到有什么问题。 –

答

您可以使用CSS3中的calc（）方法确保在使用％和px时没有区别。

使你的身体类可以是：

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

谢谢，但这并不能解决我的问题。 – PalashV

不应该是100％ - 8px？ – Pete

@Pete Yup，因为'8px'属于'margin-up'以从'100％'中移除。 – PalashV

如何删除HTML页面底部的多余空间？

相关推荐