我正在尝试在 Material Design Lite 框架内实现粘性页脚。我选择这样做 using flexbox因为 MDL 已经在使用它，而且它是我所知道的最灵活和无黑客攻击的方法。
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>标题可能不会在小预览屏幕上呈现。您可以看到页脚的下半部分被截断了。这仅在内容高于视口(viewport)时发生，否则粘性页脚修复工作正常(尝试更改 min-height 的 .page-content 规则)。我注意到在那些情况下，页脚内容的高度变为 0，但是当 <div class="page-content"> 的内容时不填满视口(viewport)，那么页脚实际上是有高度的。这是错误吗？
请注意，页脚的 html 直接取自 MDL 文档。
最佳答案
Material Design Lite 将 .mdl-layout__container 的 height 设置为 100%，阻止了内部元素增长的能力。这会导致 .page-content 溢出 .mdl-layout__content，为页脚留下零空间。
摆脱麻烦的高度!
.mdl-layout__container {
height: auto;
}
关于html - Material Design Lite 粘性迷你页脚在 flex 容器中使用时被截断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40028544/