如何在 MDL 中使 header 可滚动到较小的屏幕？

Question

使用 MDL 1.0(http://www.getmdl.io/) 我正在尝试使 header 在更大和更小的屏幕上可滚动。但它只能在大屏幕上滚动（比如在我的电脑上），但不能在小屏幕上滚动。

这是html：

<html>
<head>
 <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.teal-light_green.min.css" />
 <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header mdl-layout__header--scroll">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
    </div>
    <!-- Tabs -->
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
      <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
      <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
      <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
      <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
      <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
  </div>
  <main class="mdl-layout__content">
    <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
      <div class="page-content"><br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!</div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-2">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-3">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-4">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-5">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-6">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
  </main>
</div>
</body>
</html>

如您所见，header 是可滚动的，但仅适用于更大的屏幕（如 PC）。但是，如果您将 window 变小，或者只是在较小的屏幕上运行，则 header 是固定的并且不可滚动。此外，如果我从外部 div（主要 div）中删除 mdl-layout--fixed-header，则 header 在较小的屏幕上消失。

知道如何使 header 在大屏幕和小屏幕上都可滚动吗？

Answer 1

确保您设置了元视口标签：

<meta name="viewport" content="width=device-width">

如果这不起作用，那么我们可能无法在移动设备上滚动 headers。由于固定 class 设置布局以将其保持在顶部。如果视口没有修复它，请为此提交问题，核心团队可以进一步分类。

Answer 2

我有同样的问题，我通过将 "flex-shrink: 0;" 添加到 .mdl-layout__content

来解决它

Answer 3

我在处理 MDL Wordpress 主题时遇到了同样的问题。通过添加以下 CSS:

，我让 header 在小屏幕尺寸上与页面的其余部分一起滚动

@media screen and (max-width: 850px) {
    .mdl-layout__container {
         position: static;
    }
}

使用此方法可以在滚动时将移动设备上的 Chrome URL 栏推离屏幕（这是我的主要目标）。

我还通过 CSS:

使 header 在小屏幕的页面顶部可见

@media screen and (max-width: 850px) {
    .mdl-layout__header {
        display: block;
    }
}

Answer 4

作为 Devleshes 的后续 post，将 mdl-layout__content 的高度替换为以下内容将防止双滚动条。

以下代码片段对我有用：

.mdl-layout__content {
  flex-shrink: 0;
}

.mdl-layout__drawer.is-visible~.mdl-layout__content {
  height: calc(100vh - 50px);
}

（其中 50px 是我 mdl-layout__header 的高度）

如何在 MDL 中使 header 可滚动到较小的屏幕？

How can I make header scrollable for smaller screens in MDL?

html

css

material-design-lite