4

While I nailed down a padding of 50px below my body previously, I am still having problems with a bunch of white space sitting below my footer on my pages. Do I merely need to make my content longer to fill the vertical space? I'm using bootstrap for the first time to create my new site and I am left with this annoying dilemma. here's a link to an offending page:

http://preview.yourgreatwebsite.com/ecom.php

I bet someone will look at this and show me something I'm not seeing in Firebug (or beyond Firebug). I've been looking at it for too long!

Marian Stevens
  • 91
  • 1
  • 1
  • 7
  • 5
    Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved. Posting a [Short, Self Contained, Correct Example (SSCCE)](http://www.sscce.org/) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/) Thanks! – j08691 Feb 13 '15 at 16:34
  • *Do I merely need to make my content longer to fill the vertical space?* -- Yes; the behaviour you describe is not default. Or use a [sticky footer method.](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) – George Feb 13 '15 at 16:36
  • What George said, plus here's [Bootstraps Sticky Footer Template](http://getbootstrap.com/examples/sticky-footer/) – Ted Feb 13 '15 at 16:38

8 Answers8

3

More than likely if you are using the sticky footer template from the bootstrap page you are dealing with the margin below text that is pushing the text inside the footer div further up and therefore pushing its parent element up too. I had the same issue. An easy way to fix this would be to add the following code inside one of your stylesheets.

.footer p {  /* Selects text inside a <p> tag that is inside a .footer <div> */
   margin-bottom: 0; /* removes default <p> tag margin from the bottom */
}
Tyler Lazenby
  • 409
  • 5
  • 27
1

Add some bottom padding (exactly the height of your footer) to the footer's parent element which is body in your case:

body{
    ....
    padding-bottom:70px;// You can adjust it 
}

and make your footer's position absolute

.footer-main {
     background: #81ccfb;
     padding: 1em;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
}
Fares M.
  • 1,538
  • 1
  • 17
  • 18
1

Simply remove the default Bootstrap padding from the bottom of the page:

body
{   
    padding-bottom:0;   
}
Nuthman
  • 106
  • 9
1

I am using Angular with Bootstrap 5 and experienced the problem with . I added a style in the body as follows and problem went away

<body style="height: auto;">
  <app-root></app-root>
</body>
jprism
  • 3,239
  • 3
  • 40
  • 56
0

You could use flexbox to fix the layout.

Css

body{ 
  display:flex; 
  flex-direction: column;
}
.navbar {
  order:1;
  flex-shrink:1;
}
.headerstrip {
  order:2;
  flex-shrink:1;
}
.container {
  order:3;
  flex-grow: 5;
}
.footer-main {
  order: 4;
  flex-shrink: 1;
 }
Justin Breiland
  • 450
  • 2
  • 5
0

If in chrome dev tools you see that the body of the footer and the footer have different dimensions. You could add negative margin bottom to the body. It is a quick fix.

<body class="mb-n4">

</body>

This worked for me, perhaps it can help someone.

hugojvb
  • 1
  • 1
0

Well, the same happened to me. Turned out I was dropping the elements into the header element, instead of dropping them into the body element. If anyone has the same problem, then try dropping them into the body tag within the overview panel. A lot more accurate.

Aleksandar Stanković
  • 21
  • 1
-1

Simply add this to your footer class (in your case: .footer-main):

position: absolute;
bottom: 0;

Quick explanation: it will set your footer as a floating block, which position doesn't depend on other elements, and then it will stick the footer to the bottom of the page.

QUB3X
  • 526
  • 4
  • 18