为什么是柔性压低页脚未能

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图使用Flex箱技术，https://css-tricks.com/couple-takes-sticky-footer/来响应下推页脚在我的网页http://apple.mdsc1.com/test/为什么是柔性压低页脚未能

我用： -

<style> 
    #wrapper {flex: 1 0 auto;} 
    body, html {height: 100%} 
    body { 
     display: flex; 
     flex-direction: column; 
    } 
</style>

但失败了。我正在使用的现成布局中的东西是破坏柔性版本

我如何使它工作？

回答：

因为#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>

以上是 为什么是柔性压低页脚未能 的全部内容， 来源链接： utcz.com/qa/259624.html

回到顶部