Search code examples
csssticky-footer

sticky footer bottom margin with conditional fixed position bottom nav bar

I have a sticky footer that uses the flexbox technique which works perfectly fine and expands when the content fills the page.

I'm now trying to add a conditional, based on a particular user, fixed position bottom navbar. i've applied margin-bottom to the footer which is fine when the content fits within the page however when the content grows i cannot scroll the page to the bottom and view the full footer. It seems the bottom-margin is not applied to the footer when the content grows to fill the page. Any help would be appreciated, example code and Codepen below.

<html>
<head>
<style>
    html, body {
  /* IE 10-11 didn't like using min-height */
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}
.footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 0 0 20px 0;
}
footer {
    background: #42A5F5;
    color: white;
    margin-bottom: 25px;
    height: 50px;
}

.conditionalNav {
    position: fixed;
    bottom:0;
    left:0;
    width:100%;
    background:green;   
    color: white;
    padding:5px;
    hight:25px;
}
</style>
<meta charset="UTF-8">
    <title>Sticky Footer with Flexbox</title> 
     <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 </head>
 <body>
 <div class="content">
   <h1>Sticky Footer with Flexbox</h1>
    <p><button id="add">Add Content</button></p>
    <p>some content</p></div>

   <footer class="footer">
       Footer 
   </footer>
   <div class="conditionalNav">
        Conditional bottom navbar
   </div>
</body>
</html>

https://codepen.io/pinman/pen/eYBLYOR

Solution

  • Setting height: 100% on html and body (as opposed to min-height) prevents the document height from exceeding the viewport height, so your additional content is overflowing scrollable area.

    You could remove body from the 100%, leaving it on html, or add overflow: auto to the html/body rule so that the body element can scroll (as opposed to scrolling the window).

    Edit: removing 100% height from body allows the footer to move off the bottom of the window. Updated accordingly.

    html, body {
  /* IE 10-11 didn't like using min-height */
  height: 100%;
  overflow: auto;
}

    You also have a typo in your .conditionalNav rule:

    hight:25px;