我使用MDL获得2个滚动条,我该如何解决?

时间:2015-09-02 18:58:28

标签: javascript html css material-design material-design-lite

我正在使用谷歌的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>

1 个答案:

答案 0 :(得分:5)

您的codepen存在许多问题。

多个布局

出于某种原因,您的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中为您修复了所有这些内容。