Question

我正在尝试在材质设计精简版框架中实现粘性页脚。我选择这样做using flexbox，因为MDL已经使用它，它是我所知道的最灵活，最无黑客的方法。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

Answer 1

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

摆脱那个麻烦的.mdl-layout__content！

height

在Flex容器

1 个答案: