角材料佈局不一致的跨瀏覽器行爲

我正在面對跨瀏覽器佈局問題使用角材料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），火狐（44.0.2）不會使左窗格中滾動。它只是給它儘可能多的高度，因爲它需要。 Safari（9.0.2）的表現仍然不同，但與Chrome並不相同。

我已經準備了一個小codepen來說明這個問題：

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

上午我將角材料電網以錯誤的方式？

來源

2016-03-03 creimers

在我看來，你需要用另一個md-content更換section。我不明白爲什麼，但它會產生所需的行爲。我在此分叉你的codepen：http://codepen.io/anon/pen/vGLgmR

來源

2016-03-07 10:15:21 PLI

我有類似的問題，所以我創建了一個基於John Papa的HotTowel Angular的新項目。

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

另外值得一提的是，彈性還比較年輕，而不是到處都完全支持。

來源

2016-03-04 04:35:38

感謝您的答案，但老實說，我不覺得它非常有幫助。 – creimers

檢查這個

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

來源

2016-03-07 10:02:39 kTn

謝謝，但不是很有幫助，因爲您沒有提供顯示您的建議正在工作的鏈接。 – creimers

http://codepen.io/ktn/pen/YqXzWJ – kTn

角材料佈局不一致的跨瀏覽器行爲

回答

相關問題