Css 页面太长（使用粘性页脚）

嗨~我在网上制作一个艺术作品集，我遇到了一个问题。我曾经使用过sticky footer ryanfaitdotcom/sticky footer/现在我的页面看起来太长了。任何建议都将不胜感激

代码如下：

删除，因为它是错误的。正确的代码可以在底部找到

或在此：

html:

@萨米奇为我提供了下面的解决方案（另外还帮我清理了很多东西）。我在增加保证金，但我必须将其添加到双方，因此它从：

#page-wrap { width:800px; -moz-border-radius: 15px;
border-radius: 15px; margin: 175px auto; background:#000; position:relative;}

到

---

0有多大的区别。

您需要将页脚的

高度和包装的
页边距底部设置为相同的值。在您的情况下，它是
4em.


p.S.

我在页脚中设置了
overflow:hidden
，因为页脚的高度为260px，大于页脚高度。
您需要将页脚的
高度和包装的
页边距底部设置为相同的值。在您的情况下，它是
4em.


p.S.

我在页脚中设置了溢出：隐藏，因为它的高度是260px，大于页脚高度。
.push的高度必须与页脚相同，但是负数：set.push到页脚底部：-258px
.push的高度必须与页脚相同，但否定的是：设定。把保证金推到底部：-258px
那把小提琴是荒谬的。它只是视图面板中的一个空白白页，只有一行文本。您没有用于push div的选择器，它与页脚的高度相同@贾瑞德·法里什，你说得对！我找到了链接。@KyleSevenoaks你是在指出.push的负值吗？我已经解决了这个问题，加上我在下面建议的行中添加了。这一页似乎还是有点长。我把我的徽标绑在页脚上，事实上，你必须向下滚动才能看到它。那把小提琴太荒谬了。它只是视图面板中的一个空白白页，只有一行文本。您没有用于push div的选择器，它与页脚的高度相同@贾瑞德·法里什，你说得对！我找到了链接。@KyleSevenoaks你是在指出.push的负值吗？我已经解决了这个问题，加上我在下面建议的行中添加了。这一页似乎还是有点长。我把我的徽标绑在页脚上，事实上，你必须向下滚动才能看到它。我按照你的建议做了，并更新了小提琴和上面的内容。看起来还是有点长。我还注意到.push的值为负值。还有其他建议吗？感谢您的快速回复！首先设置：
html，body{height:800px；}
应该是100%。如果页脚的高度为258px，则第二个页脚将在底部看到空白，因为页脚的内容较小。第三，你的
包装器
里面的内容比屏幕上的内容要少得可怜，所以会出现滚动。再次感谢你抽出时间。我改变了html，身高。我理解你所说的页脚高度，这实际上是我之前遇到的一个问题，但根据放置在那里的图像，页脚高度是正确的。你说包装里面的内容比我的屏幕大？什么部分？我不担心横向滚动。为什么会向下滚动？我想在页面上的位置一样。我真的很感谢你给我的时间和努力。我确实有你写的东西，但我想我找到了问题的根源。我有一个带有边距的#换页：175px，它将容器和页脚向下推。如何在不影响页脚的情况下保持页面的环绕状态？这就是我现在的处境，页面包装卡在顶部
html，body{height:100%；}
这就是问题所在。在css中，注释应该是
/**/
。你刚刚发表了html评论。我按照你的建议做了，更新了提琴和上面的内容。看起来还是有点长。我还注意到.push的值为负值。还有其他建议吗？感谢您的快速回复！首先设置：
html，body{height:800px；}
应该是100%。如果页脚的高度为258px，则第二个页脚将在底部看到空白，因为页脚的内容较小。第三，你的
包装器
里面的内容比屏幕上的内容要少得可怜，所以会出现滚动。再次感谢你抽出时间。我改变了html，身高。我理解你所说的页脚高度，这实际上是我之前遇到的一个问题，但根据放置在那里的图像，页脚高度是正确的。你说包装里面的内容比我的屏幕大？什么部分？我不担心横向滚动。为什么会向下滚动？我想在页面上的位置一样。我真的很感谢你给我的时间和努力。我确实有你写的东西，但我想我找到了问题的根源。我有一个带有边距的#换页：175px，它将容器和页脚向下推。如何在不影响页脚的情况下保持页面的环绕状态？这就是我现在的处境，页面包装卡在顶部
html，body{height:100%；}
这就是问题所在。在css中，注释应该是
/**/
。您刚刚添加了html注释。
* {margin: 0;padding: 0;}
html { height: 100%; background:#B5A9A0 url(../Images/osh_pic_bg1.png) no-repeat;     background-size: 100%}
body { height: 100%; font: RomulC; font-size: 12px; color:#A39E95; text-align: center } 

article, aside, figure, footer, header, nav, section { display: block; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display:    block; } /* close commented backslash hack */

.wrapper {
position: relative;
width: 800px;
margin: 0 auto -258px;
}

#page-wrap { width:800px; -moz-border-radius: 15px;
border-radius: 15px; margin: 175px auto; background:#000; position:relative;}

#main-content { float:right; width: 640px; margin: 10px 10px 10px 0px; -moz-border-  radius: 15px;
border-radius: 15px; background: #2D261C; position: relative; padding: 10px 0px 0px    0px; }

.footer {
position: relative;
width: 100%;
margin: 0 auto 0;
padding: 0;
text-align:center;
    height: 258px;
overflow:hidden;
}

.footer img {
position: relative;
width: 400px;
margin: 0 auto;
} 
.bottom {
position: relative;
width: 100%;
height: 20px;
margin: 0 auto 0;
padding: 0;
text-align:center;
background-color: #000000;
}

.bottom a {
color: #fff;
text-decoration: underline;
border: 0;
}

.bottom p {
position: absolute;
left: 0;
bottom: 4px;
width: 100%;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
}


</html>

* {
margin: 0;
}
html, body {
height: 800px;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -258px; /* the bottom margin is the negative value of the footer's    height */
}
.footer {
height: 258px; /* .push must be the same height as .footer */
} 

.push {
height: 258px; /* .push must be the same height as .footer */
}

/*

#page-wrap { width:800px; -moz-border-radius: 15px;
border-radius: 15px; margin: 175px auto; background:#000; position:relative;}

#page-wrap { width:800px; -moz-border-radius: 15px;
border-radius: 15px; margin: 175px auto Opx; background:#000; position:relative;}