0

The design of my site (using Bootstrap) is when the user has scrolled to the bottom, the fixed header touches the link in the footer. On small screens it works fine. Like so -

enter image description here

But on a larger screen resolution (1024x768 upwards), the header stops before it reaches the footer. Like so -

enter image description here

I know that the html and body have to have a defined height so added this -

html, body {
height:100%;
}

but didn't work.

I also tried giving the footer a height - 

    #bottom{
border-top: none;
font-family: Calibri, san-serif; 
letter-spacing:2px;
text-transform:uppercase;
color:#000!important;
font-size: 20px;

    }

    .botwid{
min-height: 500px;
padding-top: 35px;
width: 100%;
margin: 0 555px;

but that didn't work either.

Here is my site.

Thanks

ringstaff
  • 2,331
  • 1
  • 16
  • 25
Social Monster
  • 91
  • 2
  • 15

1 Answers1

0

Seems like margin-bottom of the footer needs to be a (screenHeight - titleHeight). Try setting this property using javascript (as it would change whenever the window size changes).

Using JQuery, this could be done using .resize() call.

Michael Bar-Sinai
  • 2,729
  • 20
  • 27
  • I am totally new to this... do you mean something similar to this http://stackoverflow.com/questions/2407221/how-to-get-the-height-of-the-screen-using-jquery ? – Social Monster May 06 '14 at 20:03
  • Tried this... seems like I am on the right tracks..? http://jsfiddle.net/3j4CV/3/ Still not working, but am I close at least? – Social Monster May 07 '14 at 01:03
  • The main issue is that the title is fixed relative to the window, and the "info and contact" are at the bottom of the body. Now, you want to create a situation where the body height is such that when scrolling all the way to the bottom, "info and contact" is at a fixed distinct from the top. This can be done by adjusting the bottom padding of the body, or adding a
    at the net of body and altering its size.
     – Michael Bar-Sinai May 07 '14 at 02:23
  • Or, by choosing a different design. – Michael Bar-Sinai May 07 '14 at 02:24
  • I've tried adding padding to the body, and height to the body, but got the same results... – Social Monster May 07 '14 at 10:40