Footer component position

Question

I am having some difficulties with footer css. I want it to stay in the bottom of the page. I don't want it to be visible until i scroll to the bottom of the page.

.footer{
    position: fixed;
    display: block;
    width: 100%;
    height: 80px;
    bottom: 0;
    float: none;
}

The difference is that `fixed` is always relative to the viewport, while `absolute` is relative to the first `relative` parent. — Phiter, Mar 21 '18 at 16:27
@Phiter I've tried every positioning, and it either gets "sticky" to the bottom, or float in the middle of page when i scroll down. — Jurgis, Mar 21 '18 at 16:29
By the way, if you want it to be absolute and always at the bottom of the page, you have to set `body { min-height: 100vh; } ` — Phiter, Mar 21 '18 at 16:30
@Phiter https://codepen.io/Jurgis586/pen/zWwrLm here is my code pen :) — Jurgis, Mar 21 '18 at 18:11

score 1 · Accepted Answer · answered Mar 21 '18 at 16:28

1

The problem come from position: fixed;.

"fixed" means that it is fixed on the viewport. So try to remove position: fixed;

CSS : Position property

answered Mar 21 '18 at 16:28

Charles.C

345
1
3
12

This [article](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/) might be useful as well. – Phiter Mar 21 '18 at 16:30
The problem is, that in case the webpage would have blank space after last component, my footer is simply floating in the air after last component. – Jurgis Mar 21 '18 at 18:04

score 0 · Answer 2 · answered Mar 21 '18 at 16:32

.footer {
    position: absolute;
    display: block;
    width: 100%;
    height: 0;
    bottom: 0;
    float: none;
    transition: height 1s ease-in-out;
}
.footer.active {
    height: 80px;
}

<script type="text/javascript">
    window.onscroll = function(ev) {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            $(".footer").addClass('active');
        } else {
            $(".footer").removeClass('active');
        }
    };
</script>

<div class="footer">
    ...
</div>

Footer component position

2 Answers2