如何在Ryan Fait Stick页脚中的页眉和页脚之间分配空间

Question

我正在使用Ryan fait粘性页脚。 它运作良好。 但是我需要像下面这样在页眉和页脚之间划分空间

这里拨弄拨弄

我有像

<div class='content'>
      <div class='firstdiv'>
      </div>
      <div class='seconddiv'>
      </div>
  </div>

我想显示像红色和粉红色的框。 问题是我没有对身高content ，如果有足够的内容（多画面） first div或second div它需要同样长像display:flex ，但它亘古不变的有足够的内容全页需要被盖。 我怎样才能做到这一点。

Answer 1

试试这个，但是高度取决于内容。 您可以手动设置高度，但也必须为媒体查询编写样式。

 * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */ height: 100%; margin: 0 auto -55px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push { height: 55px; /* .push must be the same height as .footer */ } .content{ display: inline-flex; justify-content: space-around; width: 100%; height:100%; //background-color:red; } .firstdiv{ width: 25%; border: 2px solid red; height: 100px; } .seconddiv { width: 75%; border: 2px solid green; height: 100px; } 

 <div class="wrapper"> <div class="header"> <h1>CSS Sticky Footer</h1> </div> <div class='content'> <div class='firstdiv'> </div> <div class='seconddiv'> </div> </div> </div> <div class="footer"> <p>This <strong>CSS Sticky Footer</strong> simply stays put.</p> <p class="copyright">Copyright &copy; 2016 Ryan Fait &mdash; <a href="http://ryanfait.com/" title="Las Vegas Web Design">Las Vegas Web Design</a></p> </div>