why is flex to push down footer failing - html

Question

i am trying to use the flex box technique in https://css-tricks.com/couple-takes-sticky-footer/ to responsively push down the footer in my page http://apple.mdsc1.com/test/
i used:-
<style>
#wrapper {flex: 1 0 auto;}
body, html {height: 100%}
body {
display: flex;
flex-direction: column;
}
</style>
but it failed. something in the ready made layout that i am using is spoiling the flex
how i make it work?

Answer 1

because the parent of #wrapper is not a flex element, so you need to change the rules from body to jPanelMenu-panel and add height:100% to it
body,
html {
height: 100%;
margin: 0
}
.jPanelMenu-panel {
display: flex;
flex-direction: column;
height: 100%
}
#wrapper {
flex: 1;
}
#footer-bottom {
background: lightgreen
}
<div class="jPanelMenu-panel">
<div id="wrapper">
<!-- Top Bar
================================================== -->
<div id="top-bar">
<div class="container">
<!-- Top Bar Menu -->
<div class="sixteen columns">
<ul class="top-bar-menu" style="float: right">
<li><i class="fa fa-phone"></i>00 971 2 6130700</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
<!-- Header
================================================== -->
<div class="container">
<!-- Logo -->
<div class="four columns">
<div style="margin-top: 18px; margin-bottom:15px; float: left">
<h1>
<img src="images/mdsc1logo.png" alt="mdsc1">
</h1>
</div>
</div>
</div>
<!-- Navigation
================================================== -->
<div style="background-color: #292929">
<div class="container">
<div class="sixteen columns">
<i class="fa fa-bars"></i> Menu
<nav id="navigation">
<ul class="menu js-enabled arrows" id="responsive" style="margin: 0px">
<li>Home</li>
<li>About Us</li>
<li class="dropdown">
Solutions
<ul style="display: none;">
<li>Apple</li>
<li>Microsoft</li>
<!-- <li>Online Ordering</li>-->
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Slider
================================================== -->
<div class="container">
<div class="sixteen columns">
<p style="font-size: 50px; margin-top: 40px">The Home Page For MDS ONE As A Whole</p>
</div>
</div>
</div>
<div id="footer-bottom">
<!-- Container -->
<div class="container">
<div class="eight columns">© Copyright 2017 by MDSC1. All Rights Reserved.</div>
</div>
<!-- Container / End -->
</div>
</div>