0

I am having an issue with a simple single page website. It can be found here. I tried making a fiddle, but was not able to reproduce the problem.

As you can see, a scrollbar appears (tested on Chrome and FF). But I cannot find where/how it originates! I have tried a lot of overflow: hidden (which I would like to avoid) and cleafixes, but nothing helps. Can anyone locate the problem?

EDIT: I know the 100% height on the body has an effect on it, but this should not be a problem. Body should be as tall as html. But for some reason body has a margin-top, or html has a padding-top. And I do not know what is causing it.

Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239

3 Answers3

1

You could remove the height:100% from body or HTML.

apohl
  • 1,913
  • 27
  • 30
1

Seems like your "height:100%" on the body is causing it to create that scroll bar; try removing that.

user3314468
  • 78
  • 3
  • 7
  • See my edit. I know that's a possibility, but that is not the problem - so I rather not. – Bram Vanroy Feb 20 '14 at 21:26
  • Actually, it is the problem, since the body is taking up 100% of the parent element, which is the html, and you have a margin on your #main-wrapper that is pushing the rest of your document down. In effect, that causes your to become larger, and finally, the body will need to go down further to accommodate for the 100% height. take a look at http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm and http://stackoverflow.com/questions/3557199/xhtml-html-element-with-100-height-causing-scrollbars to understand better for why that problem is occurring – user3314468 Feb 20 '14 at 22:02
1

The problem is that you set a height of 100% to the body AND in your #main-wrapper you set a margin of 20px (top and bottom), with that in mind, since your body tag is the parent of the main-wrapper, it now has a top margin of 20px so the final height is 100% + 20px and that's causing the scrollbar. To solve that, just remove the 100% height or replace the "margin: 20px auto" with "margin: 0 auto; padding: 20px 0".

rampaign
  • 66
  • 2
  • 6