# Sticking footer to the bottom

**URL:** <https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214>\
**Category:** UX\
**Created:** [2015年十月7日 07:20 UTC](https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214 "2015-10-07T07:20:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![probus](https://avatars.discourse-cdn.com/v4/letter/p/67e7ee/32.png) [@probus](https://meta.discourse.org/u/probus)\
**Post date:** [2015年十月7日 07:20 UTC](https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214/1 "2015-10-07T07:20:09Z")

</div>

Has anyone found (good) solutions to sticking the footer to the bottom of the page? For short pages (like empty unread list) it looks quite ugly sitting in the middle of the browser window.

---

<div class="post-metadata">

**Author:** ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)\
**Post date:** [2015年十月7日 23:16 UTC](https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214/2 "2015-10-07T23:16:46Z")

</div>

> [@probus](#):
>
> it looks quite ugly sitting in the middle of the browser window

What do you mean it’s sitting in the middle of the browser window?

---

<div class="post-metadata">

**Author:** ![probus](https://avatars.discourse-cdn.com/v4/letter/p/67e7ee/32.png) [@probus](https://meta.discourse.org/u/probus)\
**Post date:** [2015年十月8日 05:04 UTC](https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214/3 "2015-10-08T05:04:10Z")

</div>

If the browser window is taller than the content, the footer is drawn at the end of the content (i.e. middle of the window), not at the bottom of the window.

 ![](https://global.discourse-cdn.com/meta/original/3X/6/4/64302a2631dd928b6b106141b704be39718c83f1.png)  
 ![](https://global.discourse-cdn.com/meta/original/3X/c/8/c8f40d01ae6761c1dd07d54304806430eb8541b5.png)

edit. the footer also flashes sometimes while loading pages:

 ![](https://global.discourse-cdn.com/meta/original/3X/3/1/31539df5367ff21ead2487d80083bcf2dc049d27.png)

---

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [2015年十月8日 20:18 UTC](https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214/4 "2015-10-08T20:18:34Z")

</div>

I assume you’re talking about a custom footer added in the admin\>customize section. It seems that the only way to do it on a Discourse forum is with javascript. This mostly works, but it would be great if someone could correct the way I am firing the javascript function. The way it’s being done here can’t be very efficient.

* * *

Edit: this is an improved version. Unless someone suggests a more obvious way to do this, I’ll make this into a plugin.

given this as a footer:

```html
<div id="sticky-footer">
    <div class="wrap">
        <h3>this is the custom footer</h3>  
    </div>
</div>

```

```css
#sticky-footer {
    position: static;
    color: #fff;
    background: #CD5C5C;
    // In case the window with a static footer is resized downwards
    box-shadow: 0 300px 0 300px #CD5C5C;
    height: 120px;
}

```

This will fix it to the bottom when there isn’t enough content to push it there.

```js
<script>
    var stickFooter = function() {
        var $footer = $('#sticky-footer'),
            footerHeight = $footer.outerHeight(),
            footerOffset = $footer.offset(),
            footerBottom;
            
            if (footerOffset) {
                footerBottom = footerHeight + footerOffset.top;

                if (footerBottom <= $(window).height()) {
                    $footer.css({
                        'position': 'fixed',
                        'left': 0,
                        'right': 0,
                        'bottom': 0
                    });
                    // In case the window is resized upwards
                    $('#main').css('padding-bottom', footerHeight + "px");
                } else {
                    $footer.css('position', 'static');
                    $('#main').css('padding-bottom', 0);
                }
            }
    };

    Discourse.ApplicationView.reopen({
        didInsertElement: function() {
            this._super();
            stickFooter();
        },
        
        pathChanged: function() {
            Ember.run.scheduleOnce('afterRender', this, function() {
                stickFooter();
            });
        }.observes('controller.currentPath', 'controller.model')
    });
    
    Discourse.DiscoveryCategorysView.reopen({
        didInsertElement: function() {
            this._super();
            stickFooter();
        },
        
        pathChanged: function() {
            Ember.run.scheduleOnce('afterRender', this, function() {
                stickFooter();
            });
        }.observes('controller.currentPath', 'controller.model')
    });
    
    Discourse.DiscoveryTopicsView.reopen({
        didInsertElement: function() {
            this._super();
            stickFooter();
        },
        
        pathChanged: function() {
            Ember.run.scheduleOnce('afterRender', this, function() {
                stickFooter();
            });
        }.observes('controller.currentPath', 'controller.model')
    });

    Discourse.CloakedView.reopen({
        didInsertElement: function() {
            this._super();
            stickFooter();
        },
        
        pathChanged: function() {
            Ember.run.scheduleOnce('afterRender', this, function() {
                stickFooter();
            });
        }.observes('controller.currentPath', 'controller.model')
    });
</script>

```

---

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [2015年十月9日 23:31 UTC](https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214/5 "2015-10-09T23:31:25Z")

</div>

I’ve made a plugin for this: [GitHub - scossar/discourse-sticky-footer: make a custom footer sticky in a Discourse forum · GitHub](https://github.com/scossar/discourse-sticky-footer)  
Pull requests and suggestions for improvements are welcome.

> [@probus](#):
>
> edit. the footer also flashes sometimes while loading pages:

The plugin takes care of most of the flashing by keeping the footer from jumping around the window as the view is rendered. If you reload the topic-list while you are _on_ the topic list, the footer flashes in the middle of the screen. I think that can be fixed.

---

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [2015年十月10日 04:29 UTC](https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214/6 "2015-10-10T04:29:59Z")

</div>

The worst of the flashing is caused by `.list-container` being hidden with `display: none` when the loading spinner is active. You can fix it with:

```css
.list-container.hidden {
  display: block;
  visibility: hidden;
}

```