3

I've been trying to figure out why there's a thin (maybe 1px) line at the bottom of my layout and finally pinpointed the body {line-height: 1;} in Eric Meyer's reset file. For some reason, this setting is causing the html element to extend just past my footer.

I tried this out on a super simple page with just a main div with a background color of gray, setting the html background to red so I can see the line at the bottom of the window. Playing around with height settings on the main div, p tag, or an img, the line only disappears when the main div has a height setting. (I tried to use that information to fix my actual project, but it doesn't seem to work there...)

I made a simple jsfiddle if you want to see what I'm talking about - http://jsfiddle.net/DFDj8/ - changing the #main img {height: 800px;} to just #main {height: 800px;} gets rid of the red line at the bottom. Commenting out the line-height setting in the reset does the same.

Any thoughts on what's happening? If there's another post that explains this, feel free to link to it - I couldn't find anything similar.

Thanks!

*Updated jsfiddle with block-level footer as last element - http://jsfiddle.net/DFDj8/6/

The code in jsfiddle contains Eric Meyer's reset plus the following:

html, body {
    background: red;}
#main {
    background: gray;}
#main img {
    height: 800px;
    display: block;}


<body>
    <div id="main">
            <p>paragraph paragraph</p>
            <img src="http://auntdracula.com/wp-content/uploads/2013/05/Delicious_Steaz_Soda.jpg" />
    </div>
    <footer>
        <p>&copy; 2013</p>
    </footer>
</body>
nkanderson
  • 483
  • 1
  • 8
  • 21
  • Welcome to SO! Please post a [short, self-contained and correct](http://sscce.org/) example of your code here instead of linking to an external site to maximize the chance of getting your question answered. – idoby Aug 24 '13 at 20:28
  • I'm having the same issue, but my html just has a body with header, content and footer elements...if I set `body { line-height: normal }` the extra pixel gets fixed – Polak Jan 21 '20 at 02:48

2 Answers2

2

First off, I made a simplified fiddle with all the unnecessary stuff, like the reset codes, removed. I don't like reset codes, as they can just get in the way when doing research.

Anyway, I noticed that when you decrease the line-height even further, the number of red pixels increases. So it has to do with the room for the descender below the image.
That means if you add display:block to the style for the img, the problem will disappear. See newer fiddle.

Then you won't have to worry about other, seemingly unrelated properties any more.

Edit: it also goes wrong if there's a line of text as the last element in the body. Apparently, the font's descender is too large for that line height, and it overflows out of the line. And therefore, out of the body. So the solution is to hide the overflow of that element.

body :last-child {overflow-y:hidden}

See more updated fiddle.

Or, in this case, a solution would be to keep the line-height at 1.2, but then you might have the same problem with more esotericly shaped fonts...

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • Thanks for the response Mr Lister. Could you tell me how to fix the problem if the last element is already block-level, like
    ? I've updated my original post to include a new jsfiddle with a footer.
     – nkanderson Aug 24 '13 at 22:54
  • OK, OK, so the line height is problematic after all. Apparently, the font's descender is too large for that line height, and it overflows out of the line. And therefore, out of the body. So the solution is to hide that overflow. See my edit. – Mr Lister Aug 25 '13 at 06:19
  • I've jut run into a similar problem where I'm using Javascript to set the height of a child element in order to exactly fill its parent element. When I do this, the descender on the font in the last element of the parent is overflowing causing a 1 pixel scrollbar. I managed to fix this by adding 1 pixel of padding to the last element. Apparently descenders can eat into an element's padding. – pgraham Sep 27 '13 at 02:52
  • @pgraham Yes, and into the margin. You could also have added a margin if you wanted, as long as you made sure that `overflow` was `visible`. And a line-height of 1 is almost never enough. – Mr Lister Sep 27 '13 at 06:52
0

The last element is display: inline by default and the line-height is acting on it as it should. Set the image to display:block; and you won't have that issue.

Jeffpowrs
  • 4,430
  • 4
  • 30
  • 49
  • Thanks for the response. Changing the img to display: block fixed it in this example, but I have the same problem when a footer is the last element on the page. I was under the impression that the footer element is block-level. I made a new jsfiddle with footer as the last element - http://jsfiddle.net/DFDj8/6/ – nkanderson Aug 24 '13 at 22:00