如何在Ryan fait stick footer中分割页眉和页脚之间的空间

Question

我正在使用Ryan fait粘性页脚。它运作良好。但我需要在页眉和页脚之间分割空间，如下所示

在此处Fiddle

我有像

这样的div

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

我想要显示红色和粉红色的盒子。问题是，如果content或first div内容足够（超过屏幕）second div display:flex <paper-listbox>，我的身高不会<iron-form>但它没有足够的内容需要覆盖整页。我怎样才能做到这一点。

Answer 1

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

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;