谷歌MDL瀑布頭不滾動滾動和身體右側的滾動條

數據以下顯示Google MDL頁面的標題和主體。我正在嘗試使用瀑布標題 - 滾動時標題會縮小。谷歌MDL瀑布頭不滾動滾動和身體右側的滾動條

下面的頁面是我的頭部不滾動，我得到一個滾動條在身體的右側。

那麼我怎麼設置這個瀑布標題縮小呢？瀏覽器是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>

來源

2016-03-02 Paul S Chapman

在

你<header class="mdl-layout__header mdl-layout__header--waterfall">你已經錯過了mdl-layout__header--waterfall爲你寫mdl-layout--waterfall

來源

2016-03-03 06:07:46

谷歌MDL瀑布頭不滾動滾動和身體右側的滾動條

回答

相關問題