Material Design Lite sticky mini-footer 在 flex 容器中使用时被截断

Question

我正在尝试在 material design lite 框架内实现粘性页脚。我选择这样做 using flexbox 因为 MDL 已经使用它并且它是我所知道的最灵活和 hack-free 的方法。

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>

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

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

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

Answer 1

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

摆脱那个麻烦height！

.mdl-layout__container {
    height: auto;
}

Material Design Lite sticky mini-footer 在 flex 容器中使用时被截断

Material Design Lite sticky mini-footer truncated when used in flex container

html

css

flexbox

material-design-lite