CODEWITHSUNDEEP
twitter-bootstrap
wilfra
wilfra

Reputation: 227

Bootstrap fixed footer smashing together with container div

If you zoom, the content in the container div smashes together with the fixed footer. And if I add more rows to the table in the center, the footer doesn't move down on the page, it smashes together.

There seems to be a fixed number of pixels between the navbar and footer - I would like the page to expand as far as I want and the footer to always be on the bottom.

I tried class="container-fluid" and class="row fluid" and neither fixed this problem. I also Googled and searched stackoverflow extensively and I can't find a solution.

Thanks.

Upvotes: 1

Views: 6971

Answers (1)

Pigueiras
Pigueiras

Reputation: 19356

Move <div id="footer"> inside the <div class="container">, just after the div of the table. Also, remove the <div class="container"> that is inside the footer, it isn't necessary.

The result should be something similar to the image:

Result

EDIT: Also, if you want to make your footer sticky you can use this trick from CSS-tricks.

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:50px;
   width:100%;
   background:#999;
}

And remember to increase the margin-bottom from the table.

Upvotes: 1

Related Questions