After much investigation, I discovered a mysterious thin line at the bottom of my layout. It turns out that the culprit was the body {line-height: 1;} in Eric Meyer's reset file. This setting caused the html element to extend just beyond my footer.
To test this further, I created a simple page with a main div having a gray background and the html background set to red to highlight the issue. The line at the bottom only disappeared when a height setting was applied to the main div. However, this solution did not work for my actual project.
If you want to see what I mean, check out my jsfiddle - http://jsfiddle.net/DFDj8/. Changing the #main img {height: 800px;} to #main {height: 800px;} removed the red line. Disabling the line-height setting in the reset had the same effect.
If anyone has insights into what is causing this issue or can point me to a relevant post, please share - I couldn't find any similar information. Thanks!
*I updated the jsfiddle by adding a block-level footer as the last element - http://jsfiddle.net/DFDj8/6/
The code in the jsfiddle includes Eric Meyer's reset along with 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>© 2013</p>
</footer>
</body>