The Flexbox sticky footer and the overflowing content area

StackOverflow https://stackoverflow.com/questions/20493621

Question

As seen here, I am trying to recreate the solution for a sticky footer - that does not have a set height.

I have created the site in the same fashion, but it seems like the content keeps overflowing over the footer, and the footer is simply static (not so sticky!) Obviously, this flexbox setting is constricting the 'mid section' from expanding beyond the "allowed" size (= Window - header - footer), and it won't resize to fit the content and push down the footer.

enter image description here

I tried changing the different settings for overflow on everything, I've tried changing the display options of the elements in the mid section and the mid section itself. I can't find the issue!!

Now I realise I can solve this a hundred different ways if I just defined the hight of the footer. But I'm trying not to.

Here is some simplified HTML to show my structure

<body class="Site">
<header><div id="header>...</div></header>
<div id="mid" class="Site-content">
    <div id="links" class="fadein">
        <ul><li>..</li></ul>
    </div>
    <div id="content" class="content fadein">
    text text text
    </div>

</div>
<footer>
    <div id="footer"></div>
</footer>
</body>

and the relevant css

div#header {
    position:relative;
    display:block;
    top:0px;
    left:0px;
    margin:0 auto 5px auto;
    width:auto;
}
div#mid {
    display:block;
    width:100%;
    height:auto;
    position: relative;
    background:#C69;
}
        div#content {
            margin-left:120px;
            width:720px;
            padding: 25px;
            background:#0F9;
        }

        div#links {
            position:absolute;
            left:0px;
            top:0px;
            width:100px;
            padding: 5px;
            margin-left:10px;
            margin-top:35px;
            background:#0C6;
        }
.Site {
    min-height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.Site-content {
    flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
}
footer {
    clear:both;
    width:auto;
    padding:10px;
}

Your ingenious solution would be much appreciated!

Was it helpful?

Solution

Check this link http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ to see how to implement sticky footer using flexbox.

And personally I am using this technique http://www.joshrcook.com/a-responsive-sticky-footer/ which is done without using flexbox.

<body>
    <div class="container">
        <!-- content here -->

    <footer>
        <!-- content for footer -->
    </footer>
    </div>
</body>

And for the CSS is pretty simple

html,
body {
    height: 100%;
}
.container {
    display: table;
    height: 100%;
    width: 100%;
}
footer {
    display: table-row;
    height: 1px;
}

Hope this help.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top