页脚不会留在底部

Question

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

页脚贴在底部，但不是固定的。 css 是

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

但是，当我将位置更改为 "absolute" 时，页脚会跳到内容上方。

参见 product-list 的示例。

怎么了？

Answer 1

为了让 position: absolute; 起作用，#footer_wrapper 的父元素应该有 position: relative;

Answer 2

将 #bodyWrapper position: relative; & padding-bottom 中的位置添加到您的页脚 height

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

替换此 css

#body {
box-sizing: border-box;
display: table;
height: 100%;
margin: 10px auto;
min-height: 700px;
position: relative;
width: 900px;
}

Answer 3

* {
  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;
}

<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

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

页脚不会留在底部

the footer does not remain at the bottom

html

css

position

footer