Question

我用oscommerce设计了一个网店。你可以看到here

页脚粘在底部，但没有固定。 css是

#footer_wrapper {
    /* position: absolute; */
    bottom: 0;
    clear: both;
    width: 100%;
    height: 400px;
    background-color: #0d0d0d;
    margin: 0;
}

但是，当我将位置改为“绝对”时，页脚会跳过内容。

请参阅product-list的示例。

怎么了？

Answer 1

在#bodyWrapper position: relative;＆amp;添加位置{1}}到您的页脚padding-bottom

height

替换此css

#bodyWrapper{
    padding-bottom: 400px;
    position: relative;
}

Answer 2

为了使position: absolute;有效，#footer_wrapper的父元素应该有position: relative;

Answer 3

＆＃13;

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

＆＃13;

<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

＆＃13;

这对我有用。将高度100％设置为body时，必须将所有父div设置为100％的高度。

页脚不会保留在底部

3 个答案: