角材垂直に列を塗りつぶす方法を設計する

縦に列を塗りつぶすにはどうすればいいですか？私は現在このアプリを持っています。角材垂直に列を塗りつぶす方法を設計する

私は、ページの残りの部分を取るために垂直方向に垂直のアイテムをspandたいです。私は何時間もドキュメントを読んで、他の投稿をチェックしようとしましたが、何が間違っているのか分かりません。私は角度のある素材を使い始めました。私はフレックスボックスのコンセプトには初めてです。

これは私のコードです。

<body ng-cloak layout="column" ng-app="app"> 
<div layout="row" flex> 

    <md-sidenav layout="column" md-component-id="left" class="md-whiteframe-1dp" md-is-locked-open="true"> 
     <md-list> 
      <md-list-item> 
       <md-button ng-click=""> 
        <md-icon md-font-set="material-icons">face</md-icon> 
        Alex 
       </md-button> 
      </md-list-item> 
      <md-list-item> 
       <md-button ng-click=""> 
        <md-icon md-font-set="material-icons">face</md-icon> 
        Tara 
       </md-button> 
      </md-list-item> 
     </md-list> 
    </md-sidenav> 

    <md-content flex id="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi at consequuntur doloremque 
      dolores 
      dolorum eaque, exercitationem expedita facere fugiat ipsam nemo possimus quod recusandae repellendus, saepe 
      sequi 
      vitae, voluptas! 
     </p> 
    </md-content> 

</div>

Code Pen Example

私は、親のdivに.appラッパーが問題になることがわかり、私はそれを維持したいです。

出典

2017-01-10 user3862830

プランナーを作成できますか？ – Sajeetharan

@ user3862830ここはplnkrですhttps://plnkr.co/edit/T8HaQ62IlEjXUWQpJo04?p=preview私はあなたのために作成しましたが、私はあなたの問題とは異なり、一番下まで行くことができます。問題を再現するためにplnkrを更新してください。 – bhantol

コードペンを追加しました – user3862830

-1

あなたが探しているのはviewport heightです。あなたのケースでは、md-sidenavのクラスに適用することができます：

.full-height{ 
    height: 100vh; 
}

出典

2017-01-10 17:51:17

角材垂直に列を塗りつぶす方法を設計する

答えて

関連する問題