Materiale angolare Altezza di riempimento carta del genitore

Question

Sto cercando di capire come impostare l'altezza di una scheda md per riempire il suo genitore. Ecco il mio esempio:

<div ng-controller="AppCtrl" ng-app="MyApp"> 
    <div layout="column" layout-gt-sm="row" layout-padding="layout-padding" layout-fill="layout-fill"> 

    <div flex="flex" flex-gt-sm="33" layout="column" layout-fill="layout-fill"> 
     <div flex="flex" layout="row"> 
     <md-content flex="flex"> 
      <md-card> 
      <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content> 
      </md-card> 
     </md-content> 
     </div> 
    </div> 

    <div flex="flex" flex-gt-sm="33" layout="column"> 
     <md-card flex="flex"> 
     <md-card-content> 
      <p>some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content </p> 
     </md-card-content> 
     <div layout="column" layout-gt-sm="row" class="md-actions"> 
      <md-button flex="flex" ng-click="asdf()">asdf 
      <md-tooltip>asdf</md-tooltip> 
      </md-button> 
      <md-button flex="flex" ng-click="qqqqqqqq();">qqqqqqqq 
      <md-tooltip>qqqqqqqq</md-tooltip> 
      </md-button> 
     </div> 
     </md-card> 
     <md-card flex="flex"> 
     <md-card-content> 
      <div layout="column"> 
      <p>some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content </p> 
     </md-card-content> 
     </md-card> 
    </div> 

    </div> 
</div> 

http://codepen.io/anon/pen/BNPBwJ

Chiunque può aiutare?

Answer 1

Sono nuovo di materiale angolare, quindi non ho una risposta. Quello che posso dirti è che ho applicato alcuni style = "background-color: red; padding: 5px;" agli elementi e, fino al contenuto md, quegli elementi sono tutti riempiti di layout.

Ho anche notato che l'altezza della scheda md viene ereditata dal corpo ed è al 100%.

Detto questo, funziona se si perde la direttiva md-content. Mi dispiace di non poter spiegare perché, e potrei anche usare l'aiuto per capire questo comportamento.

Answer 2

Lei sembra essere che lo rende un po 'più complicato. Funziona quando a semplificare in questo modo:

<md-content layout="row" flex> 
    <md-card flex="33"> 
    <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content> 
    </md-card> 
    ... 

invece di

<div flex="flex" flex-gt-sm="33" layout="column" layout-fill="layout-fill"> 
    <div flex="flex" layout="row"> 
    <md-content flex="flex"> 
     <md-card> 
     <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content> 
     </md-card> 
    </md-content> 
    </div> 
</div> 

Nel mio codice ho aggiunto anche una classe per md-content per impostare l'altezza in particolare, e le carte riempire lo spazio da lì .