Question

我正在尝试使用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>

但失败了。我正在使用的现成布局中的某些东西正在破坏flex

我是如何让它发挥作用的？

Answer 1

因为#wrapper的父级不是flex元素，所以您需要将规则从body更改为jPanelMenu-panel并将height:100%添加到其中

＆＃13;

body,
html {
  height: 100%;
  margin: 0
}

.jPanelMenu-panel {
  display: flex;
  flex-direction: column;
  height: 100%
}

#wrapper {
  flex: 1;
}

#footer-bottom {
  background: lightgreen
}

＆＃13;

<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>

＆＃13;

为什么flex会压低页脚失败

1 个答案: