javascript - 如何在 Ryan fait stick 页脚中拆分页眉和页脚之间的空间

Question

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

在这里 fiddle Fiddle

我有这样的div

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

我想显示像红色和粉红色的框。问题是，如果 first div 或 second div 中有足够的内容(超过屏幕)，我就没有 content 的高度像 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>