Question

我试图用zurb foundation 5.5.3 off-canvas菜单实现粘性页脚数小时，我无法弄清楚导致错误的原因。

粘性页脚有效：https://codepen.io/marko_avlijas/pen/dWBJVM
当我将它包装在画布菜单中时，它不会：https://codepen.io/marko_avlijas/pen/vmqpey

这是最小的html和css，所以这个问题不依赖于codepen HTML

<div class="wrapper">
  <div class="content">
    <h1>Sticky Footer of Unknown Height (no javascript)</h2>
    <button id="button-show">Toggle Content</button>
  </div>
  <div class="footer">
    <h3>Sticky footer</h3>
    <p>Footer of variable height</p>
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.content {
  display: table-row;
  height: 100%;
  /* ...as content is added (won't scroll) */
}
.footer {
  display: table-row;
}

HTML破解

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">

    <!-- This part is same like before -->
    <div class="wrapper">
      <div class="content">
        <h1>Sticky Footer Broken!!!</h2>
        <button id="button-show">Toggle Content</button>
      </div>
      <div class="footer">
        <h3>Sticky footer</h3>
        <p>Footer of variable height</p>
      </div>
    </div>

  </div>
</div>

Answer 1

您需要添加：

.off-canvas-wrap, .inner-wrap {height:100%;}

当你使用100％的身高时，父母需要有一个固定的身高......或者如果仍然需要100％，那么所有父母都需要html 100％才能让它发挥作用。

当我将它包装成2个div时，为什么Sticky Footer会破坏？

1 个答案: