0

我正在寻找一个带有粘性页脚的网页。我的粘性页脚工作正常（除了内容很少的页面，但我可以解决这个问题）。我曾希望我的粘性页脚，粘在页面底部，我不必向下滚动即可看到它。我的最后一个内容和页脚之间似乎有大量空白空间（我可以稍后修复）。

但回到正题，我想要的是页脚位于屏幕底部，而不是页面，如果内容需要滚动，那么它在页脚后面，内容本身是可滚动的，而不是整个页面，如果有人的话知道我的意思吗？

我假设它的 CSS，所以我将仅包含 CSS，如果需要 html，我将编辑并添加它。

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset,input, blockquote {
margin: 0; padding: 0; border: 0;
}



body {
font-family: Helvetica, Arial, Sans-Serif; line-height: 24px;
background: #ebebeb url(images/bg.png) center top repeat-y;
}


#container {
width: 600px; margin: 0 auto;
 position:relative;
    }

#ImgGallery {
position:relative;
width:600px;
height:400px;
margin:20px auto 0 auto;
}

#ImgGallery ul {
padding:0;
margin:0;
list-style-type:none;
}

#ImgGallery a.gallery span {
position:absolute;
width:1px;
height:1px;
top:-1px;
left:-1px;
overflow:hidden;
background:#fff;
color:b00a38;
}

#ImgGallery a.gallery, #ImgGallery a.gallery:visited {
display:block;
color:#000;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}
#ImgGallery a.slidea {
background:url('images/Picture 014 thumb.jpg');
height:38px;
width:50px;
}
#ImgGallery a.slideb {
background:url('images/Picture 015 thumb.jpg');
height:38px;
width:50px;
}
#ImgGallery a.slidec {
background:url('images/Picture 016 thumb.jpg');
height:38px;
width:50px;
}
#ImgGallery a.slided {
background:url('images/Picture 017 thumb.jpg');
height:38px;
width:50px;
}
#ImgGallery a.slidee {
background:url('images/Picture 027 thumb.jpg');
height:38px;
width:50px;
}
#ImgGallery a.slidef {
background:url('images/Picture 035 thumb.jpg');
height:38px;
width:50px;
}
#ImgGallery a.slideg {
background:url('images/Picture 039 thumb.jpg');
height:38px;
width:50px;
}
#ImgGallery a.slideh {
background:url('images/work dinosaur 002 thumb.jpg');
height:38px;
width:50px;
}
#ImgGallery a.slidei {
background:url('images/work dinosaur 010 thumb.jpg');
height:38px;
width:50px;
}
#ImgGallery a.slidej {
background:url('images/work dinosaur 011 thumb.jpg');
height:38px;
width:50px;
}
#ImgGallery a.slidek {
background:url('images/work dinosaur 012 thumb.jpg');
height:38px;
width:50px;
}
#ImgGallery a.slidel {
background:url('images/work dinosaur 015 thumb.jpg');
height:38px;
width:50px;
}
#ImgGallery ul {
margin:200px 0 0 150px;
width:350px;
height:38px;
}

#ImgGallery li {
float:left;
}

#ImgGallery a.gallery:hover {
border:1px solid #fff;
}

#ImgGallery a.gallery:hover span {
position:absolute;
width:200px;
height:200px;
top: -200px;
left:200px;
color:#000;

}

#header {
overflow: hidden;
padding: 0 0 10px 0;
}

#header h1 {
    float: left;
}


#header ul#categories { /*menu settings */
    float: left; list-style: none; margin: 25px 0 0 0;
}
    #header ul#categories li {
    float: left; margin: 0 0 0 15px;
    }


        #header ul#categories li a {
            display: block;
            font-size: 12px; font-weight: bold; color: #b20938;
            text-decoration: none;
        }
            #header ul#categories li a:hover {
                color: #800427;
            }


#content {
overflow: hidden; padding: 5% 0 0 0;
}

#content #avemenu a { /* link settings in main */
    font-weight: normal; color: #b20938;
    text-decoration: none;
}
    #content a:hover {
        color: #800427;
    }

        #content #main { /* post content spacing etc */
                width: 600px; float: left; padding: 0 0 0 0 ;
            }

            #content #main h2 { /*space between post heading and content */
                        margin: 0 0 0px 10px;
                        font-size: 14px; font-weight: bold; text-transform: uppercase; color: #b20938;
                    }

                #content #main p { /*post text settings */
                            margin:0 0 25px 10px; color: #000000; font-size: 12px;
                        }

                    #content #main .post { /*post box */
                        background: #ebebeb url(images/contentheadbg.png) right top repeat-x;
                        padding: 0 10px 0 0; margin: 0 0 20px 0;
                        overflow: hidden;
                    }





#content #main .post .post-content {
width: 600px;
}
#content #main .post .post-content ul.post-meta {
    width: 600px; height: 21px; list-style: none; padding: 0 0 0 10px; margin: -20px 0 0 0;
    background: #ebebeb url(images/contentheadbg.png);
}
    #content #main .post .post-content ul.post-meta li {
        float: left; margin: 0 40px 0 0;
        font-size: 12px; font-weight: bold; color: #000000;
    }
        #content #main .post .post-content ul.post-meta li.see-more {
            float: right; margin: 0 20px 0 0;
        }

        /*#menu {
        width: 600px;
        }*/

#footer {
background: url(images/footer.jpg) center bottom no-repeat; overflow: hidden;
}

#footer ul#pages {
    overflow: hidden; list-style: none; float: left; padding: 0 0 0 0; margin: 0 0 0 0;
}

    #footer ul#pages li {
    float: left; margin: 0 0 0 75px;
    }

        #footer ul#pages li a {
            display: block;
            font-size: 12px; font-weight: bold; color: #b20938;
            text-decoration: none;
        }
            #footer ul#pages li a:hover {
                color: #800427;
            } 


#map {
float: right;
}


/* simple wordpress contact form */

            div#simple-contact-form {}
div#simple-contact-form form {}
#simple-contact-form fieldset {}
#simple-contact-form label {}
#simple-contact-form input {}
#simple-contact-form textarea {}

#simple-contact-form fieldset input {} /* excludes submit button */
#simple-contact-form div.scf-submit input {} /* submit button */

#simple-contact-form input:focus,
#simple-contact-form textarea:focus {}

p.scf_spam,
p.scf_error {}
p.scf_success {}
p.scf_reset {}

#scf_success {}
#simple-contact-form fieldset input.scf_error {}
#simple-contact-form fieldset textarea.scf_error {}

a:link {
text-align: center;
}

html, body {height: 100%;}

#container {min-height: 100%;}

#content {
overflow:auto;
padding-bottom: 110px;  /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -110px; /* negative value of footer height */
height: 110px;
width: 600px;
margin: 0 auto;
clear:both;
}

/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
4

2 回答 2

0

可能类似于试图让页脚粘在底部。还要检查一下：http: //johnpatrickgiven.com/jquery/pinned-footer/

于 2013-04-10T00:33:16.373 回答
0 
#footer{
position: fixed; //make it stick and not scroll with content
bottom: 0; //stick to bottom
left: 0; //stick to left
z-index: -9999; //make it render at a high z-index to not block content
}

让你的内容 CSS 保持原样，只需让页脚粘住而不是内容在其内部滚动，你就会得到你想要的。

希望这可以帮助！

于 2016-08-02T05:22:11.517 回答