我使用 MDL 得到 2 个滚动条，我该如何修复它？

Question

我通过 google 使用 mdl 获得了 2 个滚动条。我在下面添加了我的 html。我怎样才能解决这个问题？ View code on codepen

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--8-col mdl-cell--8-col-desktop mdl-cell--12-col-tablet  mdl-cell--12-col-phone">
        <div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
        <div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
    </div>
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet  mdl-cell--12-col-phone"></div>
</div>
</div>

Answer 1

你的 codepen 有很多问题。

多种布局

出于某种原因，您的代码笔中似乎有一个额外的布局。我假设这是一个复制粘贴错误。

嵌套网格

使用嵌套网格时，请确保内部网格既是 mdl-cell 又是 mdl-grid，否则内部网格不会充当网格。因此，在您的代码段中：

<div class="mdl-grid">
  <div class="mdl-cell mdl-grid mdl-cell--8-col mdl-cell--8-col-desktop mdl-cell--12-col-tablet  mdl-cell--12-col-phone">
    <div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
    <div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
  </div>
  <div class="mdl-cell mdl-grid mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet  mdl-cell--12-col-phone"></div>
</div>

菜单按钮位置

菜单按钮位于卡片之外和网格内，而不是单元格。在触发菜单之前，这会导致溢出和定位问题。将它们移到卡片中（我假设你想要它们的地方）可以解决这个问题。

重复 ID

您对所有菜单按钮使用了相同的 ID，这导致单击一次即可触发所有菜单。

菜单项中缺少类

您在某些菜单项中遗漏了一些类。

我在 this codepen 中为您解决了所有这些问题。

我使用 MDL 得到 2 个滚动条，我该如何修复它？

I am getting 2 scroll bars using MDL, how can I fix it?

javascript

html

css

material-design

material-design-lite