angular material 布局不一致的跨浏览器行为

Question

我在使用 angular material v1.0.6.

时遇到跨浏览器布局问题

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

这是基本布局：

<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.

相差无几

我准备了一个小代码笔来说明问题：

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

我是否以错误的方式应用了 angular material 网格？

Answer 1

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

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

还值得注意的是，flex 还相对年轻，并没有在所有地方得到完全支持。

Answer 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>

Answer 3

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

angular material 布局不一致的跨浏览器行为

angular material layout inconsistent cross browser behavior

firefox

google-chrome

flexbox

angularjs

angular-material