2017-12-03 143 views

回答

0

因爲#wrapper父不是柔性的元素,所以你需要從body改變規則,以jPanelMenu-panel並添加height:100%

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> 
 
      <a href=""><img src="images/mdsc1logo.png" alt="mdsc1"></a> 
 
      </h1> 
 
     </div> 
 
     </div> 
 

 

 

 

 

 
    </div> 
 

 

 
    <!-- Navigation 
 
================================================== --> 
 
    <div style="background-color: #292929"> 
 
     <div class="container"> 
 
     <div class="sixteen columns"> 
 

 
      <a href="#menu" class="menu-trigger"><i class="fa fa-bars"></i> Menu</a> 
 

 
      <nav id="navigation"> 
 
      <ul class="menu js-enabled arrows" id="responsive" style="margin: 0px"> 
 

 
       <li><a href="index.php" class="current homepage">Home</a></li> 
 
       <li><a href="about.php">About Us</a></li> 
 

 
       <li class="dropdown"> 
 
       <a href="#" class="with-ul">Solutions</a> 
 
       <ul style="display: none;"> 
 
        <li><a href="apple.php">Apple</a></li> 
 
        <li><a href="microsoft.php">Microsoft</a></li> 
 
        <!--       <li><a href="ordering.php">Online Ordering</a></li>--> 
 
       </ul> 
 
       </li> 
 

 
       <li><a href="contactus.php">Contact Us</a></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 <a href="http://www.mdsc1.com">MDSC1</a>. All Rights Reserved.</div> 
 

 

 
    </div> 
 
    <!-- Container/End --> 
 

 

 
    </div> 
 
</div>

+0

我不明白。我該怎麼辦?我在http://www.esolutions-dm.ae/careers.php中使用了相同的技術,它在那裏工作,但它不工作http://apple.mdsc1.com/test/ –

+0

我已經更新了答案一個片段看看@shadishtaklef – dippas

+0

它的工作。謝謝:) –