Açısal 2 esnek yerleşim yüksekliği% 100

Question

Materyal tasarım ve esnek yerleşimi kullanarak açısal uygulama. https://github.com/angular/flex-layout

Üstte 2 sütunlu basit bir sayfa düzeni oluşturmaya çalışıyorum (soldaki = dolgu, sağ =% 10), ardından ekranın altındaki tek bir satır. Öğeler, yalnızca içerik için gereken yalnızca dikey alanı doldurmaktadır. Bunu yapmamın tek yolu, yüksekliği% 100'e ayarlamaktır. Bunu nasıl yapmalıyım? Bu html ile ilgili sorun nedir?

<div fxLayout="column"> 
    <div fxLayout="row" fxFlex="90%"> 
    <div fxFlex="80%" class="border"> 
     <p>Stuff is happening here</p> 
    </div> 
    <div fxFlex="20%" class="border"> 
     <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     </ul> 
    </div> 
    </div> 
    <div fxLayout="row" fxFlex="10%" class="border"> 
    <p>Bottom element</p> 
    </div> 
</div> 

Sonuç:% gerçekten gitmek için yol muhtemelen

Answer 1

Ayar yüksekliği 100. Yükseklik dinamiktir, dolayısıyla içeriğinize uyum sağlar. Durumunuzda içerik sayfayı doldurmuyor, bu normal bir davranış.

Bu çözümde neyin var?