0

I am working on a site for a client and have run into an issue that is partially caused by lack of content and monitor size. My client does not have enough content to take up the minimum 550px that I have set for the min-height of the content section of the site leaving a large space between the footer and the actual content.

I understand that removing the min-height would allow for the footer to come up to the bottom of the content, as intended, but also creates a large "blank" space beneath the footer on higher resolution monitors (1440x900 and higher tested).

So now the question: Is there a way to remove both portions of blank space or am I restricted to choosing which portion I would rather have blank? From my playing with various portions of the CSS, it seems that I have to choose one or the other.

The current demo site is here: http://bigbluedemo.weebly.com

Blue Ice
  • 7,888
  • 6
  • 32
  • 52
dwoolery
  • 3
  • 1
  • 1
    Something will have to be blank if your content doesn't fill the screen. You might consider a ["sticky footer"](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page). – showdev Apr 07 '14 at 22:08
  • 1
    what do you mean by removing both blank portions? what do you think that could be there if there's no content and also no blank? :S – arieljuod Apr 07 '14 at 22:12

1 Answers1

0

You could look into using CSS media queries to determine the height of the page and adjust the footer accordingly.

@media screen and (min-height: ...px) and (max-height: ...px) {
    footer_selector {
        position: fixed;
        bottom: 0;
    }
}

You may use the above theory to fix the footer to the bottom of the screen at certain heights. There is plenty out there on media queries.

Naturally however there is still going to be space somewhere.

Chris Brown
  • 4,445
  • 3
  • 28
  • 36