CODEWITHSUNDEEP
htmlcss
thebitguru
thebitguru

Reputation: 1042

How to get rid of the whitespace at the bottom?

Can someone please help me eliminate the extra whitespace at the bottom of this website? http://www.vonlay.com/

This image shows what I am trying to remove: http://img691.imageshack.us/img691/8837/screenshot20110607at715.png

Here is how I have the footer setup.

html, body { height: 100%; }
body > #wrapper { height: auto; min-height: 100%; }
#footer { position: relative; height: 140px; z-index: 10; clear: both;
    margin-top: -140px; background: #700; color: #fff; }

Upvotes: 0

Views: 33702

Answers (7)

Richard
Richard

Reputation: 1

put this in your section CSS

min-height: 100vh;

Upvotes: 0

Oluwatobi Omotayo
Oluwatobi Omotayo

Reputation: 1879

Try this: Add a wrapper around every HTML element in your "body" element, excluding the footer, then in CSS do this:

.wrapper {
    min-height: calc(100vh -<your-footer-height>px);
}

You don't have to add any styling to the footer since it's not in the wrapper. so the content just takes the viewport height of the device screen.

Upvotes: 0

Phphelp
Phphelp

Reputation: 1330

in the footer class change

 height: 160px;

try....

Upvotes: 0

thirtydot
thirtydot

Reputation: 228182

You should add:

#footer .content p {
    margin-bottom: 0
}

I actually wrote another answer before that one that explains what's going on properly, with an alternative fix, here it is:

You should add overflow: hidden to #footer.

This will resolve the problem, which is that the margin on the p element inside <div class="copyright-notice"> is collapsing through #footer. See: collapsing margins.

If this seems unlikely to you, try adding this, just to see what happens:

#footer .content p {
    margin-bottom: 200px
}

Upvotes: 11

kinakuta
kinakuta

Reputation: 9037

Try using positioning:

#footer {
  position: absolute;
  bottom: 0;
}

Upvotes: 0

trutheality
trutheality

Reputation: 23465

Try setting padding and/or margin on the bottom to zero for the footer and/or body.

Upvotes: 0

Michael Robinson
Michael Robinson

Reputation: 29498

Try increasing the height of your footer:

#footer { height: 145px; }

Upvotes: 2

Related Questions