因为#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>
我不明白。我该怎么办?我在http://www.esolutions-dm.ae/careers.php中使用了相同的技术,它在那里工作,但它不工作http://apple.mdsc1.com/test/ –
我已经更新了答案一个片段看看@shadishtaklef – dippas
它的工作。谢谢:) –