CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapsticky-footer
Shivam Pandya
Shivam Pandya

Reputation: 1061

Sticky Footer height Issue

Some ware I found sticky footer as per my need. but now one issue I face. When I Increase resolution greater-than my normal resolution, code work fine. but there are spacing between container div and footer div. Here i also attach screen for what I get and what I want. enter image description here

So as per image I want to stick (A) and (B) together. so whole part appear as a single . Here Also I add my css code. Due to heavy HTML and CSS code. I'm unable to use JSfiddle. I Use Twitter Bootstrap framework.

    html {
        position: relative;
        min-height: 100%;
    }
    body {
        margin: 0 0 100px; /* bottom = footer height */
    }
    footer {
        background: none repeat scroll 0 0 #FFFFFF;
        border-left: 1px solid #E1E1E1;
        border-right: 1px solid #E1E1E1;
        border-bottom: 1px solid #E1E1E1;
        position: absolute;
        bottom: 0;
        height: 100px;
    }

    #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -142px;
    }

Upvotes: 0

Views: 125

Answers (2)

sisir
sisir

Reputation: 261

As I can see in the picture there are 3 blocks one black box and then one red box and then again black box.

I can suggest you wrt C# and div. Please try to get the concept here and implement it in your case.

Suppose I have three divs just like your case. If you make the divs to be one after another then you need to follow the "float: left" property so that if there is no space beside any div then the divs will appear one after another. This is because the divs are block element.

Again this will work only if you put all the div in one container/div having the same "float: left" property.

Lets come back to your problem. Here it seems to be you are having the 2 blocks one after another. But when you zoom in the red container comes up with lots of spaces.

I guess the red container may have some height or might be inheriting the heights of the parent element. Check for that once. If it is not then go for the border property, and make the border of the red element as 0px. And use the float:left property in all the 3 blocks so that the space will not be inherited from other block elements. It would be better if you can put the 3 blocks in a single block having the float:left property.

Hope this will work in your case.

Thanks

Upvotes: 1

Shivam Pandya
Shivam Pandya

Reputation: 1061

Its Done, I done it via Jquery. here Is a Jquery Code

    $(document).ready(function(){
        $('.contentpartbg').css({height:$(window).height()});
    });

Upvotes: 0

Related Questions