0

How to set footer stick bottom if .content is absolute?

I tried this and also another use same method adding padding bottom.... but it is not work if .content is set position absolute and top

p.s I don't want to set footer fixed...

Thanks.

.head{
    position: absolute;
    left: 0;
    top: 40px;
    height: 160px;
}
.content{
    position: absolute;
    top: 200px;
}
.footer{
    position: absolute;
    bottom: 0;
}
<body>
    <div class="head"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>
Community
  • 1
  • 1
vibskov
  • 275
  • 4
  • 16

1 Answers1

1

Assuming you want to use the solution presented in the answer you linked to, you have to stop using position: absolute. You can use margins to replace top:

.head {
    margin: 40px 0;
    height: 160px;
}

However, trying to use the sticky footer trick with this triggers an unfortunate property of CSS: if you have a margin on the first child element, that margin will propagate to the parent element. This causes problems with the sticky footer trick.

The solution to that is to use padding on the wrapper rather than margin-top on the header. Your code might then look like this:

.wrap {
    padding-top: 40px;
}
.head {
    margin-bottom: 40px;
    height: 160px;
}

Having made those changes, the method described in the answer you linked to should work.

icktoofay
  • 126,289
  • 21
  • 250
  • 231
  • is there any other way to make sticky footer? because if use this method all block within the container can't set position absolute or relative, top, height easily.... – vibskov Jun 09 '13 at 05:46
  • @vibskov: You can set `position: relative` on `.content` and all `position: absolute`s within `.content` will be relative to it. – icktoofay Jun 09 '13 at 05:47