too much white space in the last of content div and before footer need that to be removed?

问题

Hope you all will be fine..!

I just started converting a PSD to HTML as i am beginner learner so did bad HTML/CSS programming,so here i am facing an issue now,that has alot of white space right in the last of content and before footer which need to be removed.

here is the link to the Index.html page : http://www.webngraphicssolutions.com/urgent_psd/index.html

waiting for you people replies..

回答1:

Your CSS

  #footer {
    background-image: url(../images/footer_back.png);
    background-repeat: no-repeat;
    background-position: bottom;
    overflow: hidden;
    position: relative; 
    top: 1250px;   //  this is causing the white space..!!
    padding: 150px 150px 150px 150px;
    }

remove this top: 1250px;

and add bottom:0; for the footer

Try

  #footer {
    background-image: url(../images/footer_back.png);
    background-repeat: no-repeat;
    background-position: bottom;
    overflow: hidden;
    bottom:0; 
    padding: 150px 150px 150px 150px;
    }

or you could also give top:50px// a reasonable space

Try

 #footer {
    background-image: url(../images/footer_back.png);
    background-repeat: no-repeat;
    background-position: bottom;
    overflow: hidden;
    position: relative;
    top: 50px;
    padding: 150px 150px 150px 150px;
    }

回答2:

ok you have placed top:1250px, which is very high, so you should make it around 20-30px.

So check your style.css file and find the below code :

 #footer {
 background-image: url(../images/footer_back.png);
 background-repeat: no-repeat;
 background-position: bottom;
 overflow: hidden;
 position: relative;
 top: 1250px; /* cahnge here - make it 20px */
 padding: 150px 150px 150px 150px;
 }

So find the above block at style.css file and do change as mention above.

回答3:

You have stated top: 1250px; to the footer, that's why it's going down.

Remove the top in here:

#footer {
    background-image: url("../images/footer_back.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 150px;
    position: relative;
    top: 1250px;
}

Like this:

#footer {
    background-image: url("../images/footer_back.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 150px;
    position: relative;
}

回答4:

Footer div is absolutely positioned 1250px down and has a top padding of 150px.

Reduce/remove these and you should be happy. Define padding with more than one value, when two values the first one is top/bottom, second is left and right. Try

padding: 20px 150px;

or adjust to taste.

P.S. This site is probably not going to look very good on tablets/mobiles - I suggest you try and get the site to look good on small displays and read articles on responsive design...

来源：https://stackoverflow.com/questions/22267395/too-much-white-space-in-the-last-of-content-div-and-before-footer-need-that-to-b

标签

html

footer