javascript - MDL 在用户调整浏览器大小时创建额外的滚动条

Question

当用户在 Chrome 或任何浏览器中从全屏转到窗口 View 时。主类 mdl-layout__content 似乎添加了一个垂直(上下)滚动条，这意味着现在用户屏幕的右侧有两个滚动条。

据我所知，人们说是页脚导致了这个问题，但我不认为是这样，因为我可以通过更改 MDL css 来轻松修复

.mdl-layout__container {
    position: absolute;
    width: 100%;
    height: 100%;
}

到

.mdl-layout__container {
    position: absolute;
    width: 100%;
    height: auto !important;
}

但是这个修复很糟糕，意味着要更改 Google 提供的代码。

问题图片:

浏览器全屏显示

浏览器现在在一个窗口中，而不是全屏

代码header.tpl

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer">

        <header class="mdl-layout__header">

            <div class="mdl-layout__header-row">
                <!-- Title -->
                <span class="mdl-layout-title">TEST</span></span>
                <!-- Add spacer, to align navigation to the right -->
                <div class="mdl-layout-spacer"></div>
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
                    <label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp">
                        <i class="material-icons">search</i>
                    </label>
                    <div class="mdl-textfield__expandable-holder">
                        <input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" />
                    </div>
                </div>
          <button id="demo-menu-lower-right"
                  class="mdl-button mdl-js-button mdl-button--icon">
            <i class="material-icons">chat</i>
          </button>

          <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
              for="demo-menu-lower-right">
            <li class="mdl-menu__item">Some Action</li>
            <li class="mdl-menu__item">Another Action</li>
            <li disabled class="mdl-menu__item">Disabled Action</li>
            <li class="mdl-menu__item">Yet Another Action</li>
          </ul>
            </div>

        </header>

      <div class="mdl-layout__drawer">

        <div class="mdl-navigation card">
          <div class="up background-tint">
            <div class="text">
              <h2>Russell Harrower</h2>
            </div>

            <div class="add"><i id="tooltip1" class="fa fa-paw" aria-hidden="true"></i>
              <div class="mdl-tooltip" for="tooltip1">Your Pet's</div>
            </div>
          </div>
          <div class="down">
            <div>
              <p>Followers</p>
              <p>26</p>
            </div>
            <div>
              <p>Following</p>
              <p>21579</p>
            </div>
            <div>
              <p>Like</p>
              <p>976</p>
            </div>
          </div>
          <div class="back">
              <p>Users Pets goes here.</p>
        </div>
        <br>
        </div>
        <!-- END OF ANIMATED MENU -->


        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
        </nav>
      </div>

        <main class="mdl-layout__content">

Feed.tpl

{*********************************************************
  Multi line comment block with credits block
  @ author:         Harrower.xyz
  @ maintainer:     support@harrower.xyz
  **********************************************************}

  {* The header file with the main logo and stuff  *}
  {include file='./tpl-files/header.tpl'}

  <div class="mdl-section__centre mdl-grid mdl-cell mdl-cell--12-col">

  <div class="
  ">
  <!-- this is the status box -->
    <div id="show-dialog" class="mdl-card mdl-cell mdl-cell--8-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp card-height-small">

     <div class="mdl-section__centre mdl-grid mdl-cell mdl-cell--12-col">
         <div class="mdl-cell mdl-cell--1-col mdl-cell--top">
           <div class="card__author">
               <img src="http://lorempixel.com/40/40/sports/" alt="user">
             </div>
         </div>
         <div class="mdl-cell mdl-cell--10-col mdl-cell--top">

           <div class="mdl-card__title">

             <h1 id="what_are_u_up_too" class="mdl-card__title-text">What are you up to?</h1>
             </div>
         </div>
            <div id="tt3" class="icon material-icons">add_a_photo</div>
         </div>
    </div>


  </div>


    <!-- end status box -->

    <div class="mdl-card mdl-cell mdl-cell--6-col  mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
      <figure class="mdl-card__media imgcl">
      </figure>
      <div class="mdl-card__title">
        <h1 class="mdl-card__title-text">Learning Web Design</h1>
      </div>
      <div class="mdl-card__supporting-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect">Read More</a>
        <div class="mdl-layout-spacer"></div>
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="fa fa-thumbs-o-up"></i></button>
        </div>
    </div>

    <div class="mdl-card mdl-cell mdl-cell--6-col  mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
      <figure class="mdl-card__media">
      </figure>
      <div class="mdl-card__title">
        <h1 class="mdl-card__title-text">Learning Web Design</h1>
      </div>
      <div class="mdl-card__supporting-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
        <div class="mdl-layout-spacer"></div>
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
      </div>
    </div>

    <div class="mdl-card mdl-cell mdl-cell--6-col  mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
      <figure class="mdl-card__media">
      </figure>
      <div class="mdl-card__title">
        <h1 class="mdl-card__title-text">Learning Web Design</h1>
      </div>
      <div class="mdl-card__supporting-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
        <div class="mdl-layout-spacer"></div>
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
        <div class="mdl-cell mdl-cell--1-col mdl-cell--top">
      </div>
    </div>

    <div class="mdl-card mdl-cell mdl-cell--6-col  mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
      <figure class="mdl-card__media">
      </figure>
      <div class="mdl-card__title">
        <h1 class="mdl-card__title-text">Learning Web Design</h1>
      </div>
      <div class="mdl-card__supporting-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
        <div class="mdl-layout-spacer"></div>
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
      </div>
    </div>

    <div class="mdl-card mdl-cell mdl-cell--6-col  mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
      <figure class="mdl-card__media">
      </figure>
      <div class="mdl-card__title">
        <h1 class="mdl-card__title-text">Learning Web Design</h1>
      </div>
      <div class="mdl-card__supporting-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
        <div class="mdl-layout-spacer"></div>
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
      </div>
    </div>

  </div>




  <div class="mdl-cell mdl-cell--3-col  mdl-cell--12-col-tablet mdl-cell--hide-phone mdl-cell--top">
    <!-- LOST PET WIDGET -->
    <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-phone mdl-cell--12-col-tablet mdl-shadow--2dp">
      <figure class="mdl-card__media imgcl" style="background-image:url('//static.pexels.com/photos/7720/night-animal-dog-pet.jpg');">
      </figure>
      <div class="mdl-card__title">
        <h1 class="mdl-card__title-text card-lost_header">LOST: MELBOURNE CDB</h1>
      </div>
      <div class="mdl-card__supporting-text">
        <p><b>Name:</b> SAMMY
          <br>
           <b>Last Seen:</b> 2 Days Ago, Bourke Street
           <br>
           <b>Kid Friendly:</b> Unsure
          </p>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect">View Pet Profile</a>
        <div class="mdl-layout-spacer"></div>
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="fa fa-share"></i></button>
        </div>
    </div>
    <!-- LOST PET -->


  </div>

  </div>

  {include file='./tpl-files/footer.tpl'}

footer.tpl

<div id="footer" class="navbar navbar-fixed-bottom">
  <nav class="navbar navbar-gray" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-inner">
      <div class="navbar-inner">
        <div class="container-fluid">

          <ul class="nav navbar-nav navbar-left">
            <li {if {$smarty.get.t}  eq 'faq'}class="active"{/if}><a href="{$SCRIPT_NAME}?t=faq">FAQ</a></li>
            <li {if {$smarty.get.t}  eq 'tos'}class="active"{/if}><a href="{$SCRIPT_NAME}?t=tos">Terms Of Service</a></li>
            <li {if {$smarty.get.t}  eq 'privacy'}class="active"{/if}><a href="{$SCRIPT_NAME}?t=privacy">Privacy</a></li>
            <li {if {$smarty.get.t}  eq 'contact'}class="active"{/if}><a href="{$SCRIPT_NAME}?t=contact">Contact Us</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li {if {$smarty.get.t}  eq 'faq'}class="active"{/if}><a href="{$SCRIPT_NAME}?t=OneSpot">- In Loving Memory Of OneSpot</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>

</div>
  <script src="{$smarty.current_dir}/javascript/bootstrap.min.js"></script>
</body>
</html>

Answer 1

上述解决方案

1. 缩小用户图像 - 从 330 像素到 200 像素；
2. 为您的用户设计一个更好的菜单系统:例如 - 如果一个用户想要收藏一个社区组，此菜单导航将继续有这个问题。
3. 不要让导航栏过于复杂。

通过执行上述操作，它解决了您的问题，请注意任何小的小屏幕可能仍然存在问题。