角度材质布局不一致的跨浏览器行为答案

【问题标题】：angular material layout inconsistent cross browser behavior角度材质布局不一致的跨浏览器行为
【发布时间】：2016-06-17 02:45:04
【问题描述】：

我在使用 angular material v1.0.6 时遇到跨浏览器布局问题。

我的目标是有一个页眉、一个页脚和两个同样宽的窗格，覆盖所有可用空间。左窗格必须是可滚动的。

这是基本布局：

<div layout="row" style="height:100%;">
    <div layout="column" flex>
      <header flex="nogrow">
        <h1>HEADER</h1>
      </header>
      <section flex layout="row">
        <div flex id="pane-one" layout="column">
          <md-content flex>
              <md-content layout-padding>
                <p>I am the scrollable content.</p>
              </md-content>
          </md-content>
        </div>
        <div flex id="pane-two" layout="column">
        </div>
      </section>
      <footer flex="nogrow">
          <h2>FOOTER</h2>
      </footer>
    </div>
</div>

现在，虽然 Chrome (48.0.2564) 中的一切都按预期工作，但 Firefox (44.0.2) 不会使左窗格可滚动。它只是给它尽可能多的高度。 Safari (9.0.2) 的行为甚至有所不同，但与 Chrome 相差不远。

我准备了一个小codepen来说明问题：

http://codepen.io/creimers/pen/pyJGpm

我是否以错误的方式应用角度材质网格？

【问题讨论】：

标签： angularjs google-chrome firefox flexbox angular-material

【解决方案1】：

我遇到了类似的问题，所以我创建了一个基于 John Papa 的 HotTowel Angular 的新项目。

https://github.com/aaronklaser/hottowel-materials

另外值得注意的是，flex 还比较年轻，并没有在所有地方都得到完全支持。

【讨论】：

感谢您的回答，但老实说，我觉得它没有多大帮助。

【解决方案2】：

检查一下

<body ng-app="MyApp">

  <header flex="nogrow" id="c1">
    <h1>HEADER</h1>
  </header>

   <div  flex  id="scenario" layout="row" style="height:100%;">
      <md-content  flex=50 id="noscroll"><p>noscroll</p></md-content>
      <md-content flex=50>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>

      </md-content>
    </div>



  <footer flex="nogrow" id="c3">
    <div layout="row" layout-padding>
      <h3>FOOTER</h3>
      <md-button class="md-fab"></md-button>
    </div>
  </footer>

【讨论】：

谢谢，但不是很有帮助，因为您没有提供显示您的建议有效的链接。

【解决方案3】：

在我看来，您需要将section 替换为另一个md-content。我不能真正说出原因，但它会产生所需的行为。我在这里分叉了你的代码笔：http://codepen.io/anon/pen/vGLgmR

【讨论】：