3

In this fairly simple HTML page and CSS stylesheet, both the body and html elements are set to "height: 100%;" and yet the page is slightly longer than the window, creating a scrollbar that I don't want.

I've read through many stack exchange posts about this issue of extra space at the bottom of a page, but have not managed to find a fix or an explanation that works for me.

I am fairly certain that the problem is not being caused by a stray text node in the DOM. I have tried removing all extra white space in between tags in the HTML file to no avail. I have tried styling the body with "min-height: 100%", but then the purple content of the page no longer takes up 85% of the whole window as it did before. I have tried setting "overflow: hidden;" on the html element, which seems to work, but I have no idea why it does. I have even tried using a flexbox to achieve the functionality displayed in the code, but I haven't been able to make that work either.

When I right click on that extra unwanted yellow space on the bottom and click "Inspect Element" I get directed to a "buttonWrapper" div, but I have no idea why this would be causing any problems.

A valid explanation of why this is happening is more important to me than a solution right now (hence my dissatisfaction with the "overflow: hidden;" method). If you do have a solution, I'd prefer it would be entirely CSS based.

Thanks for taking the time to read this.

* {
  margin: 0;
  padding: 0;
}
html {
  background-color: yellow;
  width: 100%;
  height: 100%;
}
body {
  background-color: grey;
  width: 100%;
  height: 100%;
}
#titleSection {
  width: 100%;
  height: 15%;
  text-align: center;
  font-size: 10vmin;
}
#contentSection {
  width: 100%;
  height: 85%;
  background-color: purple;
}
.buttonWrapper {
  width: 50%;
  height: 100%;
  display: inline-block;
}
.buttonImage {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
<!doctype html>
<html>

<head lang="en">
  <meta charset="utf-8">
  <title></title>
  <link type="text/css" rel="stylesheet" href="style.css">
  <link rel="icon" href="" type="image/x-icon" />
  <script src="code.js"></script>
</head>

<body>

  <div id="titleSection">Who's going to set up the board?</div>

  <div id="contentSection">

    <div class="buttonWrapper">
      <img src="http://orig15.deviantart.net/7e51/f/2013/293/e/9/owl_face_by_cypher2-d6r9e23.png" class="buttonImage">
    </div><!--
  
 --><div class="buttonWrapper">
      <img src="http://eredivisiezeilen.nl/wp-content/uploads/2015/04/1429207962_male3-512.png" class="buttonImage">
    </div>

  </div>

</body>

</html>
Glenn
  • 39
  • 5
  • 2
    It's an empty line from `display: inline-block` on `.buttonWrapper` : [**demo**](http://codepen.io/anon/pen/dYabQG?editors=110). – Shikkediel Nov 15 '15 at 02:16
  • It's like because the images are inline, but they have display block. Anyway, the float property works, but why this happens I do not know – d.k Nov 15 '15 at 02:29
  • also, of course, you can try .contentSection {overflow: hidden} if you do not expect other content in that div – d.k Nov 15 '15 at 02:40
  • Thanks for the responses! I tried using float to get rid of the empty line. I found that I needed to use "float: left;" on both the .buttonWrapper and .buttonImage to make it work properly. Any ideas why I would have to use it on both? – Glenn Nov 15 '15 at 02:59
  • actually, you can use overflow: hidden on the button wrapper also, not only `float`. No I don't know why this happens, very interesting, though – d.k Nov 15 '15 at 03:17
  • I suppose, and even sure to some degree, that this has some relation to the height set in percentage. – d.k Nov 15 '15 at 03:23
  • Thinking it's pretty odd too, it's not an empty line like usual that can be removed with `line-height` or similar tricks. Only negative margin seems to work on this one directly. – Shikkediel Nov 15 '15 at 05:11
  • 4
    As mentioned by @Shikkediel, the vertical scrollbar is the result of extra space added by `display: inline-block`. The quickest solution is to add `font-size: 0` to `#contentSection`. [**DEMO**](http://jsfiddle.net/184d403n/) ... and here's [**the explanation**](http://stackoverflow.com/q/32801095/3597276). – Michael Benjamin Nov 16 '15 at 00:22
  • Ah yes, I was using the wrong property there! Demo I posted earlier has the `margin-botton: -4px` fix included but this one is a bit nicer. [Here's another good resource](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) on the subject as well. – Shikkediel Nov 16 '15 at 00:25
  • 1
    Thank you so much @Michael_B! This is perfect! – Glenn Nov 16 '15 at 04:37

1 Answers1

2

Change it to this:

#contentSection {
  width: 100%;
  height: 85%;
  background-color: purple;
  font-size: 0;
}
User
  • 374
  • 3
  • 15
  • 2
    I don't think you should take credit for what was already posted in the comments days ago. – Shikkediel Nov 19 '15 at 11:57
  • 1
    @Shikkediel I'm not. They should've added it as an answer anyway. I'll quote him if you like, though. – User Nov 20 '15 at 14:14
  • You can edit your question and check the community wiki checkbox. – j08691 Nov 20 '15 at 14:18
  • @j08691 Nice. That's so small, I never noticed it before. ;) – User Nov 20 '15 at 14:31
  • @Shikkediel I think it sucks when people answer in comments and then you go to the page when you're in the mood to answer questions and realize it's already been answered. I actually really like what Eddie did, and hope it gets accepted as an answer because the commenter then should have made an answer as Eddie said. Otherwise this is just wasting time of those that are in the mood to answer questions. I'm no longer in the mood to do so now... – Serhiy Nov 20 '15 at 14:37
  • Actually, the question should probably be closed because this has been answered quite often already. And without any further explanation it's really kind of incomplete. – Shikkediel Nov 20 '15 at 23:46