Google MDL Waterfall header 在 body 右侧的滚动和滚动条上不收缩

Question

数据以下显示了 Google MDL 页面的 header 和主要 body。我正在尝试使用瀑布 header - header 在您滚动时缩小。

在下面的页面中，我得到的是 header 不滚动，我在 body.

的右侧看到一个滚动条

那么我该如何设置才能使瀑布 header 缩小？浏览器为IE10)

<div class="mdl-layout mdl-js-layout">
    <header class="mdl-layout__header mdl-layout--waterfall">
        <div class="mdl-layout__header-row">
            <div class="mdl-layout__title">
                Document Management
            </div>
            <div class="mdl-layout-spacer"></div>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
              mdl-textfield--floating-label mdl-textfield--align-right" id="searchBox">
                <label class="mdl-button mdl-js-button mdl-button--icon" for="srchText">
                    <i class="material-icons">search</i>
                </label>
                <div class="mdl-textfield__expandable-holder">
                    <input class="mdl-textfield__input" type="text" name="sample" id="srchText" />
                </div>
            </div>
        </div>
        <div class="mdl-layout__header-row">

        </div>
    </header>
    <main class="mdl-layout__content">
        <div class="mdl-grid search-result-width page-content" id="contentGrid">
            <!--Dummy--> 
            <div class="mdl-card mdl-shadow--2dp card-width">
                <div>
                    <div class="mdl-card__title">
                        <h2 class="mdl-card__title-text">
                            Name
                        </h2>
                        <div class="mdl-layout-spacer"></div>
                        <i class="material-icons">person</i>
                    </div>
                    <div class="mdl-card__supporting-text">
                        <p>
                            An Address                          </p>
                    </div>
                    <div class="mdl-card__actions mdl-card--border">
                        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="patientDocumentList.html?Id=08029aa4800b0ff6">DETAILS</a>
                    </div>
                </div>
            </div>

        </div>
    </main>

Answer 1

在你的 <header class="mdl-layout__header mdl-layout__header--waterfall"> 中你错过了 mdl-layout__header--waterfall 正如你写的 mdl-layout--waterfall

Google MDL Waterfall header 在 body 右侧的滚动和滚动条上不收缩

Google MDL Waterfall header not shrinking on scroll and scroll bar on right of body

html

javascript

css

material-design-lite