0

I have an HTML page whose structure is like this -

<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.

I thought if adding the % heights of the divs 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.

The CSS for this is -

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.

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.

I've used body-height: 97.9% because I only want all the visible html-height without overflow.

I've checked this in IE11, Chrome 50 and Firefox 46, and it is the same in all.

Keeping html { overflow: hidden } hides it in IE & Firefox, but not in Chrome.

What is causing this? Is there any way other than using overflow to remove it?

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. So, it is my code that is causing the trouble. Help me, please.

PalashV
  • 759
  • 3
  • 8
  • 25
  • `body { padding: 0; }`. You have the margin of the bottom to zero, but not the padding. – Marcos Pérez Gude Apr 28 '16 at 07:52
  • As I've written, there is no extra `padding` or `margin` in any element that is causing this. I've checked for all of them. – PalashV Apr 28 '16 at 07:54
  • Can you add a working example? You are not telling all the truth. When you remove padding and margin from `html` and `body` tags, you'll obtain no space. I think you have more code making conflicts. Share a working fiddle (stacksnippets or jsfiddle.net for example) reproducing the problem, and we'll see what's the issue. – Marcos Pérez Gude Apr 28 '16 at 08:10
  • Do you just need to move the footer at the bottom most part of the page? A fiddle will help to understand your question. – M.Matias Apr 28 '16 at 08:17
  • @MarcosPérezGude I tested the code mentioned in question with each tag having a different bg-color and it works fine. So, it is my code that is causing the trouble. – PalashV Apr 28 '16 at 08:33
  • There will be space after your footer because your `body`'s height isn't 100% - and then your three elements don't add up to 100% - in effect your elements add up to 96% of 97.9% of the document height – Pete Apr 28 '16 at 08:35
  • 1
    One thing that breaks your wanted layout (apart from what @Pete is saying above) is
    you have after footer element in your code, so remove it and see if you get what you wanted.     – fbxmg Apr 28 '16 at 08:35
  • @fbxmg That did it, my bad. You can add that as answer. Can somebody close this question? – PalashV Apr 28 '16 at 08:38
  • 1
    @PalashV as I tell you, when you share the fiddle automatically you receive the solution. Remove the
    tag. It's because it's important to share a working fiddle reproducing the issue (read the help center to more info). I vote to close this as typographical error. Good luck!     – Marcos Pérez Gude Apr 28 '16 at 08:39
  • @MarcosPérezGude Sorry for the trouble. It is my 2nd time with html. Thanks for helping. – PalashV Apr 28 '16 at 08:41
  • 2
    Here you go: https://jsfiddle.net/en3esh2y/2/ – Pete Apr 28 '16 at 08:44
  • 1
    @PalashV don't worry, you're welcome :) See you soon! – Marcos Pérez Gude Apr 28 '16 at 08:48
  • If you are just wanting a sticky footer though, I would recommend against using the percentages like you have done, as if you height gets smaller, then your header and footer get smaller (and may break the layout of your page). Have a look at my answer here for ways to do a sticky footer: http://stackoverflow.com/questions/23651942/css-single-column-layout-centered-fixed-width-100-height-w-header-and-footer/23657083#23657083 – Pete Apr 28 '16 at 08:53
  • @Pete Nice! I'll include this for sure. – PalashV Apr 28 '16 at 11:50

1 Answers1

0

You can use the calc() method in CSS3 to make sure there is no difference when using % and px together.

So your body class can be:

body
{
    height: calc(100% - 8px);
    margin: 8px 8px 0px 8px;
}
andreini
  • 188
  • 1
  • 3
  • 17