I have run into an issue with white space outside of the html document on the window. I have a live version here illustrating the problem. There is a large amount of whitespace at the bottom of the page, which appears to be outside of the bound of the html document itself. I have a feeling this is caused by this CSS:
#content {
width: 80%;
margin-left: auto;
margin-right: auto;
height: 640px;
overflow-y: scroll;
border: 1px solid black;
}
I am using backbone to query a Flickr API to get the data and then display them as items in the index view. However, I think this is changing the height of the document, and I can't seem to be able to make it smaller (the window and document heights seem to be fine afterwards, but there is a huge whitespace after the scrolling div which is not in the html doc).
EDIT: So the issue is caused by text that I have set to "visibility: none". I have set this instead to "display: none", and it fixed the issue. I had "visibility: none" because I thought I would not be able to access the pixel width using jQuery, but I was apparently mistaken.
You need a .container in the body or a div with position: fixed around your #content. The hidden list elements are rendered and pushing the parent containers to the bottom.