Question

我使用角度材料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的距离不是很远。

我准备了一点代码来说明问题：

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

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

Answer 1

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

Answer 2

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

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

值得注意的是，flex仍处于相对年轻状态，并未在任何地方得到完全支持。

Answer 3

检查这个

<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 个答案: