代码之家 › 专栏 › 技术社区 › Daniel Rivas

在flex容器中使用时,材料设计Lite粘性小页脚被截断

material-design-lite flexbox css html

Daniel Rivas · 技术社区 · 9 年前

我试图在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>

标题可能不会呈现在小预览屏幕上。您可以看到页脚的下半部分被截断。这仅在内容高于视口时发生,否则粘性页脚修复效果良好(尝试更改 min-height 的 .page-content 规则)。我注意到,在这些情况下,页脚内容的高度变为0,但当 <div class="page-content"> 不填充视口,则页脚实际上具有高度。这是一个错误吗?

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

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

1 回复 | 直到 9 年前

darrylyeo 9 年前

Lite套装的材料与设计 .mdl-layout__container 是 height 到 100% ,阻碍内部元件生长的能力。这导致 .page-content .mdl-layout__content ,为页脚留下零空间。

摆脱那个麻烦 身高 !

.mdl-layout__container {
    height: auto;
}