我正在制作一个带有粘性页脚的网页。我的粘性页脚工作正常（除了内容很少的页面，但我可以解决这个问题）。我希望用粘性页脚，粘在页面底部，我不得不向下滚动才能看到它。我的内容的最后一个内容与我的页脚之间似乎有大量的空白区域（稍后我可以解决）。
但回到这一点，我想要的是页脚在屏幕底部，而不是页面，如果内容需要滚动，那么它在页脚后面，内容本身是可滚动的，而不是整个页面，如果有人知道我的意思吗？
我假设它的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;
}
答案 0 :(得分：0)
答案 1 :(得分：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不变，只需将页脚粘贴而不是内容滚动，您就可以拥有自己想要的内容。
希望这有帮助！