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

Question

I have an HTML page whose structure is like this - 我有一个HTML页面，其结构如下：

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

My aim is to make the #header & #footer static at top & bottom of the page, respectively, but there is always some space left after the #footer . 我的目的是使#header和#footer分别在页面的顶部和底部#footer静态，但是#footer之后始终留有一些空间。

I thought if adding the % height s of the div s will give 100% , I could cover the whole body area, but still even as of now I'm using (18 + 75 + 3)% = 96% of the height , there is still some space left after the #footer . 我以为如果加上div的％ height s可以得到100% ，我可以覆盖整个body区域，但是即使到现在我仍在使用(18 + 75 + 3)% = 96%的height ， #footer之后还剩下一些空间。

The CSS for this is - 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;
}

I've checked from Chrome's Developer Tools that there is no extra margin or padding anywhere. 我已经从Chrome的开发人员工具中检查到，没有多余的margin或padding 。

If I try to make the addition 100% , a scroll bar appears, and there is still that space left, which doesn't belong to any element (from Chrome Developer Tools), not even html , but it remains just there. 如果我尝试将添加量设为100% ，则会出现一个滚动条，并且仍有剩余空间，该空间不属于任何元素（来自Chrome开发者工具），甚至不属于html ，但它仍然在那里。

I've used body-height: 97.9% because I only want all the visible html-height without overflow. 我使用了body-height: 97.9%因为我只希望所有可见的html-height没有溢出。

I've checked this in IE11, Chrome 50 and Firefox 46, and it is the same in all. 我已经在IE11，Chrome 50和Firefox 46中进行了检查，所有内容都相同。

Keeping html { overflow: hidden } hides it in IE & Firefox, but not in Chrome. 保留html { overflow: hidden }将其隐藏在IE和Firefox中，而不是在Chrome中隐藏。

What is causing this? 是什么原因造成的？ Is there any way other than using overflow to remove it? 除了使用overflow将其删除之外，还有其他方法吗？

If I'm wrong in my approach anywhere, feel free to correct me. 如果我在任何地方的方法都不对，请随时纠正我。

Here 's the complete code. 这是完整的代码。

Thanks. 谢谢。

Edit: I tested the code mentioned above with each tag having a different bg-color and it works fine. 编辑：我测试了上面提到的代码，每个标签具有不同的bg颜色，并且工作正常。 So, it is my code that is causing the trouble. 因此，是我的代码引起了麻烦。 Help me, please. 请帮帮我。

Answer 1

You can use the calc() method in CSS3 to make sure there is no difference when using % and px together. 您可以在CSS3中使用calc（）方法来确保将％和px一起使用时没有区别。

So your body class can be: 因此，您的身体类别可以是：

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

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

问题描述

1 个解决方案

解决方案1
0 2016-04-28 07:58:22

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

问题描述

1 个解决方案

解决方案1 0 2016-04-28 07:58:22

解决方案1
0 2016-04-28 07:58:22