Search jQuery

jQuery Forum

White gap at the bottom of the page.

in Using jQuery • 11 years ago

A website I've been working on has a black bar across the bottom. Under some conditions, however, there is a gap between the bar and the bottom of the page -- white for the body. The conditions vary between browsers and OSes. To keep things simple, I'll describe what happens with my principle development environment -- Chrome under Ubuntu.

The main body of the website is fixed width, centered against a neutral background. If the browser window is narrowed so that a horizontal scrollbar appears, the gap appears.

I have tried various things to find the gap so I can move the bar down or whatever but nothing seems to work. I tried using the document height but I found that it is greater than the actual display area which probably means that it is including something not visible (which is fine) but how do I reliably determine the extra? Or is there another solution I should be looking at (I won't bother listing all that I have tried)?

Thanks

Replies(4)

kerry.kim..

Re: White gap at the bottom of the page.

11 years ago

I'd suggest trying it with only CSS: http://ryanfait.com/sticky-footer/

I've used this technique on a website and it works great in every browser on mac and windows.

tophercoo..

Re: Re: White gap at the bottom of the page.

11 years ago

Thanks. Turns out that it was already in place (via the compass library), though someone had put changes in that superseded one parameter setting. I fixed that, but the problem still occurs.

tophercoo..

Re: White gap at the bottom of the page.

11 years ago

If anyone wishes to check out this problem, you can poke about the development site:

http://cloudtp-development.heroku.com/

This version of the website is missing some graphics and has some other experimental tweaks in it (so don't judge my client by the quality of this version of the website) but it demonstrates the problem. It shows up differently with different browsers on different platforms, but just play with resizing.

Here is an example:

Note the gap under the black bar.

Thanks again

kerry.kim..

Re: White gap at the bottom of the page.

11 years ago

I believe it has something to do with the height of the container due to the floated elements. If I add

height:100%; overflow:hidden;

to the #container (which causes the div to wrap all the floated elements, kinda like if you were to use a clearing element), I don't the gap. I'm not sure if that's enough to solve your problem or not.

Top Reply

Response title

Attachments

jQuery Forum

White gap at the bottom of the page.

Replies(4)

Re: White gap at the bottom of the page.

Re: Re: White gap at the bottom of the page.

Re: White gap at the bottom of the page.

Re: White gap at the bottom of the page.

Statistics

Tags

Actions