on 2014-08-27

Web Develop - Flexible Footer

Sometimes we think footer must fixed in website bottom or put it in last of content.

I provide a idea may be a good way. Content less browser view height, footer fixed in bottom. When content too much over browser view height, footer be put last of content.

Feature

  • flexible
  • only use CSS

Usage

min-height: calc(100% - <footer height>);

    #hd {
        height: 50px;
        background: #aaa;
        /*display: none;*/
    }
    #bd {
        text-align: center;
        min-height: calc(100% - 50px); /* important */
        background: #ccc;
    }
    #content {
        padding-bottom: 60px;
    }
    #footer {
        position: relative;
        bottom: 50px;
        text-align: center;
        height: 50px;
        background: #999;
    }

50px is footer height

    <header id="hd">
        <h1>Head</h1>
    </header>
    <article id="bd">
        <section id="content">
            <button>build content</button>
            <h1>Content</h1>
            <div id="loop"></div>
        </section>
    </article>
    <footer id="footer">
        <h2>Footer</h2>
    </footer>

demo

Refer - siteInspire - Web Design Inspiration