0

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.

Peter Benavides
  • 83
  • 2
  • 8

3 Answers3

0

You can easily change the height of #content to height: 100%. Of course, relative sizing can be problematic for embedded or external DOM elements, but as I experimented with your page, it is to me ok.

Extension: That minor effect is caused by the overflow: auto css setting. The browser doesn't know that the content of the div #content won't overflow horizontally, and thus it lets place to its vertical scrollbar. In some browsers, there are different overflow-x: and overflow-y: settings for that, but it is not standard (even in them doesn't work correctly). There are more details in my this answer.

There is no simple and browser-independent solution for this problem.

Community
  • 1
  • 1
peterh
  • 11,875
  • 18
  • 85
  • 108
  • The effect is not obvious if you just scroll in the div#content. Scrolling outside of that quickly reveals a huge amount of empty space after the div#content. Setting the height to 100% does not achieve the effect I'm looking for. I am trying to get the div#content to be a fixed height which can then scroll through the index items. – Peter Benavides Nov 06 '15 at 19:33
  • @PeterBenavides Ok, I understand now. I extended my answer, what about now? – peterh Nov 06 '15 at 19:40
  • I'm not sure that the overflow directions were causing it. I am pretty sure the extra space was caused by divs with "visibility: hidden" – Peter Benavides Nov 06 '15 at 19:49
  • @PeterBenavides Then set an "overflow: hidden" for the `#content` and you will be surprised. `visibility: hidden` divs are non-entities in the layout since around ie6. – peterh Nov 06 '15 at 19:51
0

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.

juanmnl
  • 412
  • 3
  • 9
  • Thanks. I ended up switching the elements to "display: none" instead. I was using visibility to test for pixel width, but the feature I was using that for is working fine with "display: none". I will mark this as the answer though, because this is another way to fix the problem. – Peter Benavides Nov 06 '15 at 19:51
-1

set height to height:auto; the height is hardcoded

Payson
  • 508
  • 4
  • 11
  • 22
  • 1
    The height is hard coded because I would like the scrolling div to be a set height, so that you can scroll through the items without scrolling through the rest of the page. Setting the height to auto does not fix the problem. – Peter Benavides Nov 06 '15 at 19:30