Material Design Lite 粘性迷你页脚在弹性容器中使用时被截断答案

【问题标题】：Material Design Lite sticky mini-footer truncated when used in flex containerMaterial Design Lite 粘性迷你页脚在弹性容器中使用时被截断
【发布时间】：2016-10-13 18:38:40
【问题描述】：

我正在尝试在 Material Design lite 框架中实现一个粘性页脚。我选择这样做using flexbox，因为 MDL 已经使用了它，而且它是我所知道的最灵活和无 hack 的方法。

main.main-layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.page-content {
  /*min-height: 500px;*/
}

div.mdl-layout__container{
  height:auto;
}

<html>

<head>
  <link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  <script src="https://code.getmdl.io/1.2.1/material.min.js"></script>
</head>

<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--no-drawer-button">
    <header class="mdl-layout__header mdl-layout__header--waterfall mdl-layout__header--waterfall-hide-top" id="djpsych-header">
      <div class="mdl-layout-icon"></div>
      <div class="mdl-layout__header-row" id="djpsych-header__top-row">
        <div class="mdl-layout-spacer"></div>
        <span class="mdl-layout__title"> Title of the site </span>
        <div class="mdl-layout-spacer"></div>
      </div>
      <div class="mdl-layout__header-row">
        <div class="mdl-layout-spacer"></div>
        some kind of navbar element
        <div class="mdl-layout-spacer"></div>
        <a id='top'></a>
      </div>
    </header>

    <main class="mdl-layout__content main-layout">
      <div class="page-content">
        <p>This is the content of the page!</p>
        <p>This is the content of the page!</p>
        <p>This is the content of the page!</p>
        <p>This is the content of the page!</p>
        <p>This is the content of the page!</p>
        <p>This is the content of the page!</p>
        <p>This is the content of the page!</p>
        <p>This is the content of the page!</p>
      </div>
      <footer class="mdl-mini-footer">
        <div class="mdl-mini-footer__middle-section">
          <div class="mdl-logo">Title</div>
          <ul class="mdl-mini-footer__link-list">
            <li><a href="#">Help</a>
            </li>
            <li><a href="#">Privacy & Terms</a>
            </li>
          </ul>
        </div>
      </footer>
    </main>
  </div>
</body>

</html>

标题可能无法在小预览屏幕上呈现。您可以看到页脚的下半部分被截断。这仅在内容高于视口时才会发生，否则粘性页脚修复工作正常（尝试更改 .page-content 规则的 min-height）。我注意到在这些情况下，页脚内容的高度变为 0，但是当 <div class="page-content"> 的内容没有填满视口时，页脚实际上有一个高度。这是一个错误吗？

请注意，页脚的 html 直接取自 MDL 文档。

http://codepen.io/rivasd/pen/PGagLP

【问题讨论】：

标签： html css flexbox material-design-lite

【解决方案1】：

Material Design Lite 将.mdl-layout__container 的height 设置为100%，阻碍了内部元素的成长能力。这会导致.page-content 溢出.mdl-layout__content，为页脚留下零空间。

摆脱那个麻烦的height！

.mdl-layout__container {
    height: auto;
}

【讨论】：

我去掉了css中所有的height属性声明，模拟了实际内容。你可以看到问题仍然存在@darrylyeo
我已经澄清了我的答案。
实现了你的答案，仍然没有运气:( @darrylyeo
事实上，我的规则已被 MDL 取代，已修复，现在您的修复似乎有效！
你是个天才@darrylyeo