CODEWITHSUNDEEP
htmlcssresponsive-designflexbox
Nick Pineda
Nick Pineda

Reputation: 6462

CSS and Flexbox: Getting a Footer to Stick

Tools: CSS and Flexbox

Note: This question is strictly a CSS/Flexbox aesthetics question

Problem: My footer will not stay planted these days.It shrinks and slips off the page as you resize vertically.

I use to have a nice Holy-Grail layout and the header and footer stayed in their places as you shrunk the window vertically while the middle content gave way.

Life was great- until I translated my CSS into React's JSX style, which has forced me to wrap an extra div around my footer.

Before when life was great:

<div class="main-container"> /*flex-direction:column
     <div class="header">
     <div class="canvas">   /*my pretty flex rows*/
     <div class="footer">

After translation ruined my week:

<div class="main-container"> /*flex-direction:column
     <div class="header">
     <div class="extra-container"> /*dang you React*/
        <div class="canvas">   
        <div class="footer">

You can check out this puzzle here http://jsfiddle.net/wd6o22dr/

The Brain Teaser for you Front-End Masters:

Considering that keeping that "extra-container" is a must, how do you keep the footer from shrinking and slipping off the page as you resize the page vertically?

Upvotes: 1

Views: 145

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371271

Considering that keeping that "extra-container" is a must, how do you keep the footer from shrinking and slipping off the page as you resize the page vertically?

One option you have is absolute positioning.

HTML

No changes.

CSS

Add four rules to existing declaration block.

#footer {
    height: 50px;
    border: 1px solid black;
    background-color: black;
    position: absolute; /* NEW */
    bottom: 0;  /* NEW */
    z-index: 1;  /* NEW */
    width: 100%;  /* NEW */
}

DEMO: http://jsfiddle.net/wd6o22dr/1/

Upvotes: 1

Related Questions