Oscommerce Question posted in
The official documentation can be found here

the footer does not remain at the bottom – Oscommerce

i desgined a webshop with oscommerce. you can see here

The footer to stick to the bottom, but not fixed. The css is

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

But, when i change position to “absolute” the footer jumping up over the content.

See the example for the product-list.

Whats wrong?

Tags:

3

Answers


  1. 0

    In order for position: absolute; to work, the parent element of the #footer_wrapper should have position: relative;

    Login or Signup to reply.
  2. 0

    add position in #bodyWrapper position: relative; & padding-bottom to your footer height

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

    replace this css

    #body {
box-sizing: border-box;
display: table;
height: 100%;
margin: 10px auto;
min-height: 700px;
position: relative;
width: 900px;
}
    Login or Signup to reply.
  3. 0 
    * {
  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>

    This works for me. while setting height 100% to body, you have to set all the parent divs with the height of 100%.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search